Webpack：将变量注入静态服务-worker.js

Question

我正在编写 PWA 应用程序。我使用的是我正在使用的模板（Vue.js PWA 模板）中的默认 Service Worker，但现在我决定从头开始编写自己的模板。我已将它 (service-worker.js) 放入 static 文件夹中，因为我想为其设置静态名称 - 我不想每次都更改名称（构建）。

在这个特定的 Service Worker 中，我想使用包 name 和 version，这样我就可以很好地生成缓存 ID。

所以我想实现这样的目标：

./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 不会检查这些文件。

我将不胜感激 and/or 指导我如何解决这个问题。

Answer 1

模块

模块放置在node_modules。 src 是您的源文件夹，您应该只在其中保留您不会在 production 模式下使用的文件。

还要记住，模块只不过是像库一样的 JavaScript 代码；功能集。如果您将 *.js 文件从 node_modules 移动到 src — 这仍然会按模块进行。

我真的不明白你为什么要使用 string-replace-loader 因为它与你的问题无关。

Loader allows to perform replacements in a way String.prototype.replace() does (loader uses it internally). It means that if you want to replace all occurrences, you should use RegExp-like string in options.search with g flag in options.flags, etc.

从 String.prototype.replace() 到 MDN：

The replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match.

还是我误会你了？

Worker-loader

但是如果我没听错的话——实际上有一个工人装载机。

$ npm install worker-loader --save-dev

Answer 2

好的，我终于明白了。我已经使用了 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');
        }
      }
    ])
  ]

Webpack：将变量注入静态服务-worker.js

Webpack: Injecting variables into static service-worker.js

javascript

webpack

service-worker

pwa

模块

Worker-loader