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

fbcarpbf 于 2022-11-13 发布在 Webpack

关注(0)|答案(2)|浏览(187)

我正在编写PWA应用程序。我使用的是我正在使用的模板（Vue.js PWA模板）中的默认Service Worker，但现在我决定从头开始编写我自己的应用程序。我已经将它（service-worker.js）放在static文件夹中，因为我希望它有一个静态名称--我不想每次（构建）都更改名称。
在这个特定的Service Worker中，我希望使用包name和version，以便可以很好地生成缓存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不会检查这些文件。
我将非常感谢帮助和/或指导我如何能解决这个问题。

webpack

来源：https://stackoverflow.com/questions/51057862/webpack-injecting-variables-into-static-service-worker-js

2条答案

按热度按时间

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');
        }
      }
    ])
  ]

赞(0）回复(0）举报 2022-11-13

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

赞(0）回复(0）举报 2022-11-13

我来回答

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

2条答案

模块

Worker-loader的名字

相关问题

热门标签

最新问答