npm script+webpack:定制你的npm脚本命令

2018-04-24

由于觉得切换mock数据和后端真实数据太麻烦了（虽然每次都只是改个URL），但是很容易出现问题呀，万一哪次发布之前用mock数据调试，结果忘了改成后端数据就gg了，所以想能不能再配置一个npm命令用于启用mock数据。

首先使用mock数据和后端数据的区别在于请求的url不同，比如/user接口，使用mock数据请求的是

1	localhost:3000/user

使用线上地址(http://163.com)请求的是

1	http://163.com/user

所以我们需要一个参数，表明现在是mock环境。

其次增加一个npm命令，package.json中的script属性：

"scripts": {
    "start": "env ENV=dev node ./server/index.js",
    "build": "webpack --config ./scripts/webpack.prod.js --colors --progress",
    "lint": "eslint \"*.js\"",
    "clean": "rm -rf s",
    "buildtest": "npm run clean && webpack --config ./scripts/webpack.prod.js --progress --env=test",
    "buildpre": "npm run clean && webpack --config ./scripts/webpack.prod.js --progress --env=pre",
    "buildonline": "npm run clean && webpack --config ./scripts/webpack.prod.js --progress --env=online"}

scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。见npm scripts 使用指南,先增加一个命令,

1	"dev-mock": "env ENV=dev node ./server/index.js",

env是一个命令可以配置环境变量，可以这样尝试一下：

npm init

生成package.json
script中加入

1	"dev": "env ENV_TEST=1 node ./index.js"

然后新建index.js文件，写入

1	console.log(process.env.ENV_TEST);

可以看到控制台可以打印出1，

所以我们修改一下dev-mock,加入配置mock的参数，

1	"dev-mock": "env ENV=dev USE_LOCAL_MOCK=1 node ./server/index.js",

但是我们需要在客户端判断，这个环境变量是存在于服务端的呀。这里要用到webpack.DefinePlugin

new webpack.DefinePlugin({
    'process.env': {
        'USE_LOCAL_MOCK': process.env.USE_LOCAL_MOCK
    }
})

这里创建了一个全局对象process.env,当然还可以把想配置的全局属性放里面。

启动npm run dev-mock时，USE_LOCAL_MOCK为1，客户端可以判断process.env.USE_LOCAL_MOCK是否为1来判断是否使用mock数据，此时，npm start依然是使用后端数据，npm run dev-mock 使用本地mock数据，大功告成。

当然也可以使用cross-env等，这仅仅作为其中一个方案。

参考

package.json
DefinePlugin