根据Node 环境变量实现不同环境下模块依赖的问题

推荐:

1
2
3
4
5
6
7
8
9
10
11
12
13
let config

if (process.env.NODE_CONFIG === 'test') {
config = require('./address.test')
} else if (process.env.NODE_CONFIG === 'pre') {
config = require('./address.pre')
} else if (process.env.NODE_CONFIG === 'prod') {
config = require('./address.prod')
} else if (process.env.NODE_CONFIG === 'dev') {
config = require('./address.pre')
}

module.exports = config

将环境变量process.env.Node_CONFIG与预期的值进行比较,比如放在if条件判断语句中,这样在构建过程即会根据当前的环境配置转化为布尔值,且只加载对应的模块,不符合条件的模块会被忽略。

  • Node环境与浏览器环境无差别,代码构建后只包含当前环境下依赖的模块

反例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let env = process.env.Node_CONFIG || 'dev'
let config

switch (env) {
case 'test':
config = require('./address.test')
break
case 'pre':
config = require('./address.pre')
break
case 'prod':
config = require('./address.prod')
break
default:
config = require('./address.dev')
}

module.exports = config

上面例子中,由于环境变量process.env.Node_CONFIG只是赋值给了一个变量,没有直接进行逻辑判断,所以process.env.Node_CONFIG不会转化为布尔值。

虽然构建时也能根据当前的环境变量获取对应的模块,但是代码逻辑会保留,4个模块都会打包进bundle。而且在浏览器环境中我们无法获取环境变量,以至于只使用dev模块。

  • 在Node环境下使用正常
  • 打包至浏览器端使用时出错
  • 构建时4个模块都会打包进来

总结:

当我们想要根据Node环境变量实现不同环境下模块依赖时:

  • 如果该模块只在Node环境下使用,比如webpack构建前的配置文件,则没有使用限制。
  • 如果模块需要在浏览器下环境下使用,这必须确保process.env.Node_xxx已经被替换为具体的值或者根据逻辑比较转为布尔值。
1
2
3
4
5
6
7
8
9
10
11
new webpack.DefinePlugin({
'process.env': {
NODE_CONFIG: JSON.stringify(process.env.NODE_CONFIG || 'dev')
}
})

// or

if (process.env.NODE_CONFIG === 'test') {

}

http://git.jm.com/FE-team/nuxt-template/tree/ssr-api

坚持原创技术分享,您的支持将鼓励我继续创作!