我正在使用浏览器扩展项目,并希望在开发和构建期间在background.js
中使用其他URL。我想这样做,而不必记住在开发和构建之间更改代码。在服务器项目中,我只使用dotenv / environment变量,但这不适用于有效运行客户端的扩展。
在background.js
中,我有一个使用此fetch
的api_base_url
(我们也开发了API);
...
const api_base_url = 'http://127.0.0.1:8000/v1/'
...
在构建(web-ext build
)之前,我必须手动将其设置为类似的内容;
...
const api_base_url = 'http://a.domain.com/v1/'
...
理想情况下会是这样;
...
const api_base_url = ENV['API_BASE_URL']
...
并且我在本地开发人员中有一个.env
;
API_BASE_URL='http://127.0.0.1:8000/v1/'
和.env.production
(或.env.build
);
API_BASE_URL='http://a.domain.com/v1/'
[这也是manifest.json
中的问题,我需要将permissions
中的不同URL列入白名单
"permissions": [
"storage",
"tabs",
"https://a.domain.com/v1/*",
"http://127.0.0.1:8000/v1/*"
]
这不是每个用户的运行时选项,因此browser.storage
和options.js
不是我们想要的。
我已经弄清楚了,但是基本的答案是添加webpack并将dotenv-webpack
用于输入文件,例如background.js
,将copy-webpack-plugin
用于非输入文件,例如manifest.json
。这些插件将用process.env.YOUR_VARIABLE_NAME
中的值替换出现的process.env.YOUR_VARIABLE_NAME
字符串。
const CopyPlugin = require('copy-webpack-plugin')
const DotenvPlugin = require('dotenv-webpack')
module.exports = (env) => {
const dotenvPath = __dirname + '/.env.' + env
const replaceWithProcessEnv = (content) => {
for (var key in require('dotenv').config({ path: dotenvPath }).parsed) {
content = content.replace(new RegExp('process.env.' + key, 'g'), process.env[key])
}
return content
}
return {
plugins: [
new DotenvPlugin(
{
path: dotenvPath,
safe: true
}
),
new CopyPlugin(
[
{
from: 'src/manifest.json',
transform(content) {
return replaceWithProcessEnv(content.toString())
}
}
]
)
]
}
}
我在这里做了一个完整的工作示例;https://github.com/paulmwatson/web-ext-environments