npm自定义命令打包版本

问题

目前手头上的项目要分test环境，qa环境，生产环境，需要根据不同的环境进行项目打包。
参考其他人的项目，可以使用 yargs 插件来识别命令行打包。

准备

npm install yargs --save 下载 yargs 插件并保存到 package.json 中。

配置

/config 文件夹下创建出对应的配置文件，以要打包test环境的项目包为例，在 /config 下创建出test.env.js文件，内容如下：

'use strict'
module.exports = {
  NODE_ENV: JSON.stringify('test'),
  // 配置所有后端请求的url前缀地址
  baseURL: JSON.stringify('http://110.110.110.110:8808'),
  // 自定义通用配置，在组件内可以直接引用，如：
  returnURL: JSON.stringify('http://110.110.110.110:8808/first.html')
}

/config文件下配置完成之后，在/build文件夹下创建webpack.test.conf.js，并复制默认的webpack.prod.conf.js里的内容，修改如下部分：

...

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// 修改路径，对应在config文件夹中新创建的test.env.js
const env = require('../config/test.env')  

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
    ...
    ...

build.js 文件中添加：

// 对webpack.base.config中的publicPath生效
// publicPath将根据NODE_ENV决定用的是index.js中module.exports的dev还是build
process.env.NODE_ENV = 'production'
// 引用了 yargs 插件，添加这部分配置，自动根据profile找到对应的webpack配置文件
const argv = require('yargs').argv
const profile = argv.env || 'dev'

最后去package.json文件中修改script部分，写好打包命令：

...
...
"scripts": {
// dev环境本地部署命令
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --env dev",
    "qa": "webpack-dev-server --inline --progress --config build/webpack.qa.conf.js --env qa",
    // test环境本地部署命令
    "test": "webpack-dev-server --inline --progress --config build/webpack.test.conf.js --env test",
    // 生产环境本地部署命令
    "prod": "webpack-dev-server --inline --progress --config build/webpack.prod.conf.js --env prod",
    "lint": "eslint --ext .js,.vue src",
    "build:dev": "node build/build.js --env dev",
    "build:qa": "node build/build.js --env qa",
    // test 打包
    "build:test": "node build/build.js --env test",
    // 生产打包
    "build:prod": "node build/build.js --env prod"
  },
...
...

运行

以上面的test为例：

本地运行：npm run test

项目打包：npm run build:test