Webpack: внедрение переменных в статический service-worker.js

Я пишу приложение PWA. Я использовал Service Worker по умолчанию из шаблона, который я использую (шаблон Vue.js PWA), но теперь я решил написать свой собственный с нуля. Я поместил его (service-worker.js) в папку static, потому что я хочу иметь для него статическое имя - я не хочу менять имя каждый раз (сборка).

В этом конкретном Service Worker я хочу использовать пакеты name и version, чтобы я мог красиво сгенерировать идентификатор кеша.

Итак, я хочу добиться чего-то вроде этого:

./package.json:

{ "name": "my.app", "version": "1.0.0", ... }

./static/service-worker.js: var CACHE_ID = 'PACKAGE_NAME-vPACKAGE_VERSION'; ...

./build/service-worker.js: var CACHE_ID = 'my.app-v1.0.0';

./build/service-worker.js показывает, чего я хочу достичь.

Я пробовал https://www.npmjs.com/package/string-replace-loader с конфигурацией ниже:

  {
    test: /service-worker\.js$/,
    loader: 'string-replace-loader',
    options: {
      multiple: [
        {
          search: 'PACKAGE_NAME',
          replace: packageConfig.name
        },
        {
          search: 'PACKAGE_VERSION',
          replace: packageConfig.version
        }
      ]
    }
  }

Но, насколько я понимаю, файлы, помещенные в static, не являются модулями (я прав?), Поэтому они не проверяются module.rules.

Я был бы очень признателен за помощь и / или советы, как я могу решить эту проблему.


webpack javascript service-worker pwa
person marverix    schedule 27.06.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Хорошо, я наконец понял. Я использовал copy-webkit-plugin и его возможность трансформировать:

  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'static/service-worker.js',
        to: './service-worker.js',
        transform (content) {
          var parsed = content.toString();
          var transformation = [
            {
              search: 'PACKAGE_NAME',
              replace: packageConfig.name
            },
            {
              search: 'PACKAGE_VERSION',
              replace: packageConfig.version
            }
          ];

          for(var i = 0; i < transformation.length; i++) {
            parsed = parsed.replace(transformation[i].search, transformation[i].replace);
          }

          return Buffer.from(parsed, 'utf8');
        }
      }
    ])
  ]
person marverix    schedule 27.06.2018

arrow_upward
2
arrow_downward

Модули

Модули помещаются в node_modules. src - это ваша исходная папка, в которой вы должны хранить только те файлы, которые вы не собираетесь использовать в production режиме.

Также помните, что модули - это не что иное, как код JavaScript, например библиотеки; набор функций. Если вы переместите файлы * .js из node_modules в src - это все равно будет по модулям.

Я не могу понять, почему вы хотите использовать string-replace-loader, поскольку это не имеет ничего общего с вашим вопросом.

Загрузчик позволяет выполнять замены так, как это делает String.prototype.replace () (загрузчик использует его внутри). Это означает, что если вы хотите заменить все вхождения, вы должны использовать строку типа RegExp в options.search с флагом g в options.flags и т. Д.

И из String.prototype.replace() в MDN:

Метод replace () возвращает новую строку с некоторыми или всеми совпадениями шаблона, замененными на замену. Шаблон может быть строкой или регулярным выражением, а замена может быть строкой или функцией, вызываемой для каждого совпадения.

Или я вас неправильно понял?

Worker-loader

Но если я вас правильно понял - есть вообще загрузчик для рабочих.

$ npm install worker-loader --save-dev
person robertgrzonka    schedule 27.06.2018