如何利用webpack定义全局常量

Posted on | In | Visitors:
Words : 746 | Reading ≈ 2 min

在前端开发过程中，我们在不同的工程阶段，对代码会有不同的要求。比如在开发阶段，我们希望代码能更快地实时编译，自动刷新，可以调试定位源码；在接口测试阶段，我们希望可以不修改源码，只通过修改某个配置，就可以无缝切换接口地址或者上下文，以及决定请求是否携带token；在发布代码时，我们希望输出的代码体积尽可能小，代码可以各种压缩，各种分离打包等等。为了让一套代码适应不同工程阶段的需求，我们通常会刻意制造开发、测试、生产几种编译模式。然后我们通过webpack做一些配置，使得webpack在编译阶段可以识别出当前是什么模式，从而产生不同的编译行为，达到不同的编译效果。
而这个配置，就是webpack.DefinePlugin。它是webpack的内置插件，用于提供自定义全局常量功能。

1. 配置方法

1
2
3
4
5
6
7
// webpack.config.js file
plugins: [
	new webpack.DifinePlugin({
		DEVELOPMENT: '"dev"', // JSON.stringify('dev')
		'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
	})
]

  • tip1: 定义全局常量时，常量的值会需要被字符串化，需要注意的是，如果写成字符串格式，必须在单引号内再套一对双引号（或者反过来在双引号内套单引号），才能彻底字符串化，或者直接使用JSON.stringify。

  • tip2: 如果要为process的某个属性定义值，尽量使用'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)而不要使用process: { env: { NODE_ENV: JSON.stringify('production') } }，因为后面的做法会覆盖process对象，会影响其他模块的兼容性（因为其他模块也可能会对它赋值）。

2. 原理

webpack.DefinePlugin中定义的常量，它会在编译时，内联地加入代码中，相当于原地替换，所以在项目的源码任何js模块中都可以直接使用这些常量。

3. 全局常量使用场景

通过webpack.DefinePlugin配置常量的意义在于，我们可以保存一些在编译时产生的变量的值，然后在编译完的运行态中，获取和使用这个常量，来做一些事情。

‘process.env.NODE_ENV’是比较常用的常量，它是我们区分不同编译模式的关键，在编译以外的代码中，我们很多时候也需要拿这个值来实现一些切换，主要目的是为了让开发、测试更方便和高效。

场景举例：
定义’process.env.NODE_ENV’常量，在前端发请求的时候，根据’process.env.NODE_ENV’这个常量设置不同的请求路径格式。

1
2
3
4
5
6
7
8
9
10
11
switch(process.env.NODE_ENV) {
	case 'dev':
		baseUrl = 'localhost:8000';
		return;
	case 'test':
		baseUrl = '10.22.22.21:3000';
		return;
	case 'prod':
		baseUrl = '10.69.32.101';
		return;
}

–
GOODLUCK!