node+webpack构造打包 打测试/线上包

前言

前端通过构造工具打包是日常的工作内容,但因为环境的不一样测试/线上。通常都需要修改配置的。我就想只通过命令来传入一个变量,这样来区别打包的环境。

如何实现呢?

1.配置package.json

1.通过构造命令传入一个环境变量,如:

node scrupts/build.js uat //uat就为测试环境的变量

2.然后我把node命令,写到在package.json里面
node+webpack构造打包 打测试/线上包_第1张图片

那么我就可以通过

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学习。实现通过命令来测试/线上分开打包。其实很简单,别给自己设置一到墙,手动来配置一下,重复的手动劳动该走自动化来解决。

你可能感兴趣的:(前端技术)