webpack - 如何根据环境变量自定义 Service Worker？

Question

编辑:这看起来像 Unresolved Question 的重复项。我是否将其标记为已回答，还是删除？

我正在 Vue CLI 3 应用程序中使用 workbox-webpack-plugin 中的 InjectManifest。我注入(inject)的自定义服务工作线程具有 Firebase 云消息传递 (FCM) 的处理功能。我需要根据我的环境(本地、临时和生产)监听来自不同发件人的消息。

理想情况下，service-worker.js 应该是这样的:

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

firebase.initializeApp({
    'messagingSenderId': process.env.VUE_APP_FCM_SENDER_ID
});

但是，Webpack 似乎并未触及此代码，因为输出服务工作线程仍然读取 process.env.VUE_APP_FCM_SENDER_ID 而不是硬编码 key 。

如何通过 webpack 运行我的 Service Worker 来解析环境变量？

Answer 1

现在对你来说可能已经太晚了，但对其他人来说，这就是我继续解决这个问题的方法。此过程仍然使用 .env 文件作为与环境相关的变量。
我们的想法是创建一个加载 .env 文件的新脚本，该文件创建一个用 .env 文件中的变量填充的新文件。
构建过程结束后，我们只需将新生成的文件导入到 sw.js 中即可使用。

以下是步骤。
首先创建一个名为 swEnvbuild.js 的文件，该文件将是在 webpack

之后运行的脚本

//swEnvBuild.js - script that is separate from webpack
require('dotenv').config(); // make sure you have '.env' file in pwd
const fs = require('fs');

fs.writeFileSync('./dist/public/swenv.js',
`
const process = {
  env: {
    VUE_APP_FCM_SENDER_ID: conf.VUE_APP_FCM_SENDER_ID
  }
}
`);

其次，我们在 sw.js 中导入由 swEnvBuild.js 生成的名为 swenv.js 的文件。

// sw.js
importScripts('swenv.js'); // this file should have all the vars declared
console.log(process.env.VUE_APP_FCM_SENDER_ID);

最后，要使用一个命令，只需在您的 npm 脚本中添加以下内容(假设您运行的是 Linux/Mac)。

scripts: {
  "start": "webpack && node swEnvBuild.js"
}

希望这能解决问题。我希望有更干净的方法来做到这一点，所以我也很高兴知道其他人的解决方案。