"publish": "cross-env-shell CDN_ENV=development \"npm run build && node ./upload.js\"",
运行 npm run publish
发生了什么以及有什么注意点?
注意点:
cross-env
: 使用cross-env
解决了跨平台设置NODE_ENV
的问题:使用cross-env解决跨平台设置NODE_ENV的问题cross-env-shell
:当需要在整个嵌入式命令行脚本中而不是仅在一个命令中设置环境变量时,需要将cross-env
替换为cross-env-shell
例如,如果希望将环境变量应用于一系列串联的命令,则需要将这一系列串联的命令 用引号引起来 并使用cross-env-shell
代替cross-env
。
当运行npm run greet
命令时,会去执行echo $GREETING && echo $NAME
,用cross-env-shell
设置变量NAME
和GREETING
可以在echo $GREETING && echo $NAME
命令中使用,如果使用cross-env
则无法在其中使用
{
"scripts": {
"greet": "cross-env-shell GREETING=Hi NAME=Joe \"echo $GREETING && echo $NAME\""
}
}
经验法则是:如果要传递给 cross-env
包含要解释的特殊 Shell
字符的命令或用 cross-env
设置的变量需要在一系列串联命令中获取到时,使用 cross-env-shell
。否则使用 cross-env
。
process.env
上实际上没有NODE_ENV
这个变量,即NODE_ENV
属性并不在process.env
对象上,当执行命令vue-cli-service serve
、vue-cli-service build
/vue-cli-service test:e2e
、vue-cli-service test:unit
时,会根据执行命令去判断当前所在模式是什么,从而给process.env.NODE_ENV
赋值,我们也可以通过手动设置当前所处模式:"dev-build": "vue-cli-service build --mode development",
,此时会根据--mode
后面的模式去设置process.env.NODE_ENV
的值。(截图一张官网的解释,还有附上解释比较清晰的一个文章:理解webpack之process.env.NODE_ENV详解(十八))
CDN_ENV=loca
:为process.env
添加一个key
为CDN_ENV
的属性,值为local
- 当命令中包含
&
时,代表并行执行,&&
代表顺序执行 - 我们 只可以 在
webpack.dev.config.js
脚本中以及 它所引入的脚本中 访问到process.env.NODE_ENV
,而无法在其它脚本中访问。在vue
项目中,可以在vue.config.js
以及其中引入的所有文件中访问到process.env.NODE_ENV
,在webpack
处理的入口脚本文件以及其中引用的脚本文件都无法访问到webpack.dev.config.js
脚本提供的process.env.NODE_ENV
属性,但可以通过webpack
的插件来让这些脚本文件都能访问到process.env.NODE_ENV
。具体可参考下面的配置(NODE_ENV和webpack):
//普通方式
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
})
]
}
//chainWebpack方式
chainWebpack: (config) => {
config
.plugin('define')
.tap(definitions => {
Object.assign(definitions[0]['process.env'], {
//key : value 直接添加到definitions[0]['process.env'] 即 process.env上
CDN_ENV: JSON.stringify(process.env.CDN_ENV)
})
return definitions
})
},
运行 npm run publish
发生了什么
首先通过 cross-env-shell
设置了环境变量 CDN_ENV
为 development
,然后依次执行 npm run build
命令和 node ./upload.js
命令,在这两条命令中都可以访问到 CDN_ENV
的值。在执行 npm run build
命令时通过 cross-env
设置变量 CDN_ENV=development BUSINESS=pay
(实际上这里可以不用设置,通过执行 publish
命令时已经设置过了,这里设置的原因是当单独执行 build
命令时不至于缺少这两个环境变量。如果在 build
中重新设置这两个环境变量,会将 pulish
命令中设置的变量值覆盖),当 build
命令执行完毕后执行 node ./upload.js
命令,即执行 upload.js
,即将本地 dist
下的内容上传到 cdn
上。