模块

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

对于解决该问题的帮助和/或指导，我将不胜感激。

Answer 1

模块

模块放置在node_modules中。 src是您的源文件夹，在此文件夹中应仅保留不以production模式使用的文件。

还要记住，模块不过是像库之类的JavaScript代码而已。功能集。如果将* .js文件从node_modules移到src －仍将按模块进行。

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

Loader允许以String.prototype.replace（）的方式执行替换（loader在内部使用它）。这意味着，如果要替换所有匹配项，则应在options.search中使用类似RegExp的字符串，在options.flags等中使用g标志。

从MDN中的String.prototype.replace()开始：

replace（）方法返回一个新字符串，该字符串具有部分或全部匹配的模式，并由替换项替换。模式可以是字符串或RegExp，替换可以是字符串或每次匹配要调用的函数。

还是我误会了你？

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：将变量注入静态service-worker.js

2 个答案:

模块

Worker-loader