问题描述
我正在包 json 中的 env
命令中设置 start
变量,如下所示
package.json
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.config.dev.js --env.mode=dev --port 4200"
},
然后我尝试使用 env
访问此 process
变量,但显然它不起作用。
scripts.js
let url = process.env.mode == 'dev' ? 'local-url' : 'url';
我收到以下错误:
scripts.js:3 Uncaught ReferenceError: process is not defined
我尝试添加包含以下内容的 .eslintrc.json
文件,但没有成功
{
"env": {
"node": true,"commonjs": true
},"extends": "eslint:recommended"
}
我不确定这是否是在 javascript 文件中识别环境和访问 env 变量的正确方法,请提出建议。 谢谢
解决方法
首先创建 .env 文件来存储你的变量。
然后使用npm包dotenv https://www.npmjs.com/package/dotenv
基本上在作为入口点的顶级文件中添加:
// commmon modules
require('dotenv').config()
// ES modules
import dotenv from 'dotenv';
dotenv.config()
之后,您将可以使用 process.env 访问所有变量
,使用 VerifyLoadApplication()
将您的环境变量导出到您的构建中,并使其值可用于您的客户端脚本。
在您的 Webpack 配置文件中,您应该有一个 'CurrentDb.Properties("AllowFullMenus") = False
'CurrentDb.Properties("AllowBuiltInToolbars") = False
数组(如果没有,只需将其添加到配置对象中)。将以下内容添加为 webpack.DefinePlugin()
数组中的一项:
plugins
当 Webpack 构建您的客户端脚本时,它现在会将所有出现的 plugins
替换为实际值,以便在客户端中运行脚本时按预期工作。
如果您需要更多环境变量或客户端运行时可用的任何其他构建时常量,只需将它们添加到您传递给 new webpack.DefinePlugin({
'process.env.mode': JSON.stringify(process.env.mode)
});
构造函数的对象中。只需确保正确命名它们,以避免与您可能在客户端脚本中声明的变量发生冲突,因为这可能会将事情搞砸。