前端如何判断环境变量？

Question

我用的是webpack4 然后能 项目中有config文件夹 里面包含了 dev.config.json和prod.config.json，我想在前端通过环境变量来控制引入哪个配置文件。目前我是这么做的，如下：

这样我实践是可行的，我想知道webpack在编译的时候是怎么编译的，我在编译后的文件中只看到了确实是引入了相应的文件。附上webpack编译后的代码：

"use strict";
eval("\n\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar config = {};\nif (true) {\n    config = __webpack_require__(/*! ./dev/config.dev.json */ \"./config/dev/config.dev.json\");\n} else {}\nexports.default = config;//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jb25maWcvY29uZmlnLnRzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLy4vY29uZmlnL2NvbmZpZy50cz9kODk3Il0sInNvdXJjZXNDb250ZW50IjpbIlwidXNlIHN0cmljdFwiO1xuXG5PYmplY3QuZGVmaW5lUHJvcGVydHkoZXhwb3J0cywgXCJfX2VzTW9kdWxlXCIsIHsgdmFsdWU6IHRydWUgfSk7XG52YXIgY29uZmlnID0ge307XG5pZiAocHJvY2Vzcy5lbnYuTk9ERV9FTlYgPT09ICdkZXZlbG9wbWVudCcpIHtcbiAgICBjb25maWcgPSByZXF1aXJlKCcuL2Rldi9jb25maWcuZGV2Lmpzb24nKTtcbn0gZWxzZSB7XG4gICAgY29uZmlnID0gcmVxdWlyZSgnLi9wcm9kL2NvbmZpZy5wcm9kLmpzb24nKTtcbn1cbmV4cG9ydHMuZGVmYXVsdCA9IGNvbmZpZzsiXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLFNBRUE7QUFDQSIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./config/config.ts\n");

/***/ }),

/***/ "./config/dev/config.dev.json":
/*!************************************!*\
  !*** ./config/dev/config.dev.json ***!
  \************************************/
/*! exports provided: target, default */
/***/ (function(module) {

eval("module.exports = {\"target\":\"http://192.168.2.99:8101\"};//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jb25maWcvZGV2L2NvbmZpZy5kZXYuanNvbi5qcyIsInNvdXJjZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./config/dev/config.dev.json\n");

/***/ }),

帮我解答下 谢谢了，我并不知道用这个方法来在前端判断环境变量是否正确，请指教。

Answer 1

发现怎么每次我提的问题之后都得我自己回答...貌似是我的问题太弱智了。
so, Emmmmmmm~~ Here is my answer...
在stackoverflow上查到有人用这个方法来实现

plugins: [
    new webpack.DefinePlugin({
        ENV: require(path.join(__dirname, './path-to-env-files/', env))
    })
]
// Settings file located at `path-to-env-files/dev.js`
module.exports = { debug: true };

// and then this in your code
if (ENV.debug) {
    console.log('Yo!');
}

但是我实现了之后貌似是不行，并不能把文件的数据导出 webpack报错 不知道是否是我的tsc引起

然后我就只把 环境变量导出 在前端进行判断 也就是 酱紫的...

new webpack.DefinePlugin({
   'process.env': {
      NODE_ENV: process.env.NODE_ENV ? JSON.stringify(process.env.NODE_ENV) :             
        JSON.stringify('development')
    }
})

然后直接再前端进行 process.env.NODE_ENV判断当前环境变量。

Answer 2

Webpack Mode

Webpack4会根据你设置的mode自动设置对应的NODE_ENV。