前言
前端通过构造工具打包是日常的工作内容,但因为环境的不一样测试/线上。通常都需要修改配置的。我就想只通过命令来传入一个变量,这样来区别打包的环境。
如何实现呢?
1.配置package.json
1.通过构造命令传入一个环境变量,如:
node scrupts/build.js uat //uat就为测试环境的变量
2.然后我把node命令,写到在package.json里面
那么我就可以通过
npn run build_uat //打包测试环境
npn run build_prod //打包线上环境
用npm命令来运行,简化我的代码输入。也方便团队间交流,通常会看package.json里面的命令的哦。
2.webpack.config.prod.js
我的build.js是把打包的配置信息写到webpack.config.prod.js里面。
因此这一步就是如何通过构造打包文件,把变量写到js里面。
首先我介绍如何读取文件,通过node process进程模块。
process模块,允许你获得或者修改当前node进程的设置,不想其他的模块,
process是一个全局进程(node主进程),你可以直接通过process变量直接访问它。node下就有变量。
属性 | 介绍 |
---|---|
process | 对象提供一系列属性,用于返回系统信息。 |
process.pid | 当前进程的进程号。 |
process.version | Node的版本,比如v0.10.18。 |
process.platform | 当前系统平台,比如Linux。 |
process.title | 默认值为“node”,可以自定义该值。 |
process.argv | 当前进程的命令行参数数组。 |
process.env | 指向当前shell的环境变量,比如process.env.HOME。 |
process.execPath | 运行当前进程的可执行文件的绝对路径。 |
process.stdout | 指向标准输出。 |
process.stdin | 指向标准输入。 |
process.stderr | 指向标准错误。 |
而我重点介绍process.argv。我们刚刚在命令提示台里面输入:
node scrupts/build.js uat
//如上面命令
node[]scrupts/build.js[]uat
//通过把空格给区分开导出成一个数组
[node,scrupts/build.js,uat]
那么我要获取第三个,就通过命令process.argv[2] == uat;
那么我在webpack.config.prod.js里面写入代码,获取环境变量:
然后通过new webpack.DefinePlugin(definitions),定义一个process.env.MY_ENV的全局函数,写入我的uat到里面。
new webpack.DefinePlugin(definitions)
允许你创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。比如,你可能会用一个全局的常量来决定 log 在开发模式触发而不是发布模式。这仅仅是 DefinePlugin 提供的便利的一个场景。
3.js获取环境变量
最后通过在里面js,写入process.env.MY_ENV,来做区分。
结语
通过对process进程和webpack.DefinePlugin学习。实现通过命令来测试/线上分开打包。其实很简单,别给自己设置一到墙,手动来配置一下,重复的手动劳动该走自动化来解决。