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

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

0 голосов
/ 27 июня 2018

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

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

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

/ package.json :.

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

/ статический / сервис-worker.js .: var CACHE_ID = 'PACKAGE_NAME-vPACKAGE_VERSION'; ...

.

/ строительство / сервис-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.

Буду признателен за помощь и / или руководство, как решить эту проблему.

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Хорошо, я, наконец, понял. Я использовал 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');
        }
      }
    ])
  ]
0 голосов
/ 27 июня 2018

Модули

Модули размещены в 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 () возвращает новую строку с некоторыми или всеми совпадениями шаблона, замененными заменой. Шаблон может быть строкой или RegExp, а замена может быть строкой или функцией, вызываемой для каждого совпадения.

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

Рабоче-погрузчик

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

$ npm install worker-loader --save-dev
...