Webpack:将变量注入静态service-worker.js

fbcarpbf  于 2022-11-13  发布在  Webpack
关注(0)|答案(2)|浏览(188)

我正在编写PWA应用程序。我使用的是我正在使用的模板(Vue.js PWA模板)中的默认Service Worker,但现在我决定从头开始编写我自己的应用程序。我已经将它(service-worker.js)放在static文件夹中,因为我希望它有一个静态名称--我不想每次(构建)都更改名称。
在这个特定的Service Worker中,我希望使用包nameversion,以便可以很好地生成缓存ID。
所以我想实现这样的目标:

./包.json

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

./静态/服务工作者.js

var CACHE_ID = 'PACKAGE_NAME-vPACKAGE_VERSION';
// ...

./构建/服务工作者.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不会检查这些文件。
我将非常感谢帮助和/或指导我如何能解决这个问题。

roqulrg3

roqulrg31#

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

rxztt3cl2#

模块

模块被放置在node_modules中。src是你的源文件夹,在这里你应该只保存你不打算在production模式下使用的文件。
还要记住,模块只不过是一个JavaScript代码之类的库;如果你把你的 *.js文件从node_modules移动到src-这仍然是由模块。
我真的不明白你为什么要使用string-replace-loader,因为它与你的问题无关。
Loader允许以String.prototype.replace()的方式执行替换(Loader在内部使用它)。这意味着如果你想替换所有出现的字符串,你应该在www.example.com中使用类似RegExp-like的字符串options.search并在options.flags中使用g flag,等等。
String.prototype.replace()MDN
replace()方法返回一个新的字符串,其中某些或所有的模式匹配项被替换项所替换。模式可以是一个字符串或RegExp,替换项可以是一个字符串或为每个匹配项调用的函数。
还是我误会你了?

Worker-loader的名字

但如果我没理解错的话-实际上有一个工人的装载机。

$ npm install worker-loader --save-dev

相关问题