使用工作箱从服务工作人员文件中读取环境变量答案

【问题标题】：Read env variable from service worker file using workbox使用工作箱从服务工作人员文件中读取环境变量
【发布时间】：2018-07-02 02:12:44
【问题描述】：

我正在使用 workbox-sw 和 workbox-webpack-plugin 我的 src sw.js 根文件夹中的文件（与我的 .env 文件处于同一级别）

如何获取环境变量并将其访问到我的 src sw.js 文件中

这是来自我的webpack.config.js

new workboxPlugin({
    globDirectory: 'dist',
    globPatterns: ['**/*.{html,js,css,svg,otf,png,jpg,gif}'],
    swSrc: './sw.js',
    swDest: path.join('public', 'sw.js')
})

我们将不胜感激每一个帮助！谢谢大家！

【问题讨论】：

我在这里 (stackoverflow.com/a/57051150/1410035) 提出了一个针对 vue-cli 的解决方案，但它依赖于一个 Webpack 插件，您可以在没有 vue-cli 的情况下轻松使用该插件。这也可能对您有用，只需调整插件以读取您关心的环境变量（它可以访问所有内容）。

标签： javascript webpack service-worker workbox workbox-webpack-plugin

【解决方案1】：

因为您使用的是swSrc: './sw.js'，这意味着./sw.js 文件将成为最终输出的Service Worker 文件的基础。（它会在构建过程中插入预缓存信息。）

这意味着您可以在 workbox-webpack-plugin 运行之前处理您希望的 ./sw.js，包括通过将占位符替换为环境变量来修改它。我相信webpack.DefinePlugin 通常用于此目的？

【讨论】：

它不起作用，我的解决方法：1. 在 HtmlWebpackPlugin 的 webpack 配置中定义一个变量：myVariable: process.env.MY_VAR 2. 插入 index.html：<script>var MY_VAR = "<%= htmlWebpackPlugin.options.myVariable %>"; 3. 在你的服务中获取变量工人：const myVariable = self.MY_VAR;
我也无法完成这项工作。定义插件正确替换主 js 包中的变量，但不是在生成的 SW 中。
你找到任何解决方案了吗？我正在使用 nuxt js，我想在我的自定义服务工作者中使用 .env 文件，所以如果你找到任何解决方案，请回复