背景
在我们项目开发中，vue-cli配置好的一些简单的打包命令往往都无法满足我们的需求。不同环境下的请求路径，api的版本，所在的平台等等。在这个情况下， 我们急需可以自定义去配置一些全局的参数提供项目中使用。这时候我们就想到了可以从打包命令下手，通过传递不同的参数，并且对这些参数处理之后挂载到全局，去解决我们的问题。我们在项目的的打包命令中做了很多次的修改优化和迭代，下面讲速一下我们最新打包命令配置的思路。
传参
打包命令时通过 -- 向下指向process.argv传参，我们是通过键名去匹配键值，提高配置的实用性，降低耦合，通用于各个项目中。eg： npm run serve -- --键名=键值
开启多个监听服务
使用插件concurrently（npm install concurrently --save） npm script命令同时开启多个监听服务 build-serve-concurrently.js
// 统一输出打包命令
const concurrently = require('concurrently')
let arr = process.argv.filter((itm, idx) => idx > 1)
let env = 'development' // 不传参数默认为dev环境
let cmd = '' // 运行命令
let platform = ['mp-weixin', 'mp-toutiao', 'mp-baidu', 'h5'] // 默认打包平台参数
let concurrentlyArr = []
let str = arr.join(' ')
arr.forEach((item) => {
item = item.slice(2)
let platArr = item.split('=')
switch (platArr[0]) {
case 'env':
cmd = !platArr[1].includes('dev') && !platArr[1].includes('prod') ? cmd = `mode ${platArr[1]}` : ''
env = platArr[1].includes('prod') ? 'production' : 'development'
break
// 平台配置命令
case 'platform':
let value = platArr[1].split(',')
// 打包命令，打包platform传入的平台，可传多个用逗号隔开
concurrentlyArr = value.map((child) => {
return `cross-env NODE_ENV=${env} UNI_PLATFORM=${child} vue-cli-service ${cmd} uni-build --watch ${str}`
})
default:
break
}
})
// 打包命令，默认打包四个平台
concurrentlyArr = !concurrentlyArr.length ? platform.map((child) => {
return `cross-env NODE_ENV=${env} UNI_PLATFORM=${child} vue-cli-service ${cmd} uni-build --watch ${str}`
}) : concurrentlyArr
concurrently(concurrentlyArr)
环境（--env）
环境参数，常用值有 local本地，dev研发， release测试， prod线上正式 eg： --env=release
vue/cli3.0之后环境变量可以在本地文件中新建一个对应的.env.release(环境名称) 定义一个VUE_APP_ENV对应的环境参数，原框架中只有development和production环境，设置了VUE_APP_ENV打包命令时传入mode release 就会自动识别混淆入 process.env中，在.env.文件名 文件中还可以定义一些全局不需要变动的参数，可以直接通过process.env获取
平台（--platform）
我们的命令中配置了默认打包四个平台（百度mp-baidu，微信mp-weixin，头条mp-toutiao，h5），--platform=xxx可自定义打包指定的平台，可传入多个用，隔开，可以自由的切换自己想要并线打包的平台 eg： --platform=mp-weixin,mp-toutiao，更多平台参数可以查看
版本（--version）
在我们开发中，为了并线，小程序的发布，急需到多个版本的api进行支持，那么版本的配置对我们来说就显得尤为急需。默认状态下我们是选择打包无版本。版本可以通过键值自定义传入，既方便了我们开发时的各种场景，又可以避免固定化的参数配置的局限性 eg: --version=v1
自定义参数拓展
在配置文件中可以在命令中传入任意参数，传入的参数将会以全大写的方式挂载在全局，我们可以在开发时的任意位置直接获取到我们想要的参数。可以运用于sass多平台配置等业务场景中
比如版本 console.log(VERSION) --> 打印出 release
全局注入参数
vue/cli3.0以上
在vue.config.js文件中配置第三方插件全局注入参数 new webpack.DefinePlugin()
const webpack = require('webpack')
const VERSION_NAME = 'version' // 版本
let param = infoVersion(process.argv)
// 第三方插件全局注入参数
var definePlugin = new webpack.DefinePlugin(param)
module.exports = {
css: {
loaderOptions: {
// 给 stylus-loader 传递选项
stylus: {
import: [
'~@/design/variable.styl',
'~@/design/mixin.styl'
]
}
}
},
configureWebpack: { // 第三方插件配置
plugins: [
definePlugin
]
}
}
// 处理自定义参数
function infoVersion(arr, type) {
let value = {}
arr.forEach((item) => {
item = item.slice(2).split('=')
if (item.length > 1) {
let str = item[0] === VERSION_NAME ? '/' + item[1] : item[1]
value[item[0].toUpperCase()] = JSON.stringify(str)
}
})
return value
}
vue/cli3.0以下
在build/webpack.base.conf.js文件中配置第三方插件全局注入参数 new webpack.DefinePlugin()
可通过获取参数传入的，process.argv
总结
框架的打包配置尽量降低与业务的耦合性，提高拓展性。尽可能保证输出的框架是一个架子，可以由不同的业务场景进行拓展，而不是跟着业务跑，当业务需求新增修改时框架将也会需要跟着大幅度的修改。 将会大大提高开发的成本。
