运行 npm run publish 发生了什么以及有什么注意点?

"publish": "cross-env-shell CDN_ENV=development \"npm run build && node ./upload.js\"",

运行 npm run publish 发生了什么以及有什么注意点?

注意点:

  1. cross-env : 使用 cross-env 解决了跨平台设置 NODE_ENV 的问题:使用cross-env解决跨平台设置NODE_ENV的问题
  2. cross-env-shell :当需要在整个嵌入式命令行脚本中而不是仅在一个命令中设置环境变量时,需要将 cross-env 替换为 cross-env-shell
    例如,如果希望将环境变量应用于一系列串联的命令,则需要将这一系列串联的命令 用引号引起来 并使用 cross-env-shell 代替 cross-env
    当运行 npm run greet 命令时,会去执行 echo $GREETING && echo $NAME ,用 cross-env-shell 设置变量 NAMEGREETING 可以在 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

  1. process.env 上实际上没有 NODE_ENV 这个变量,即 NODE_ENV 属性并不在 process.env 对象上,当执行命令 vue-cli-service servevue-cli-service build / vue-cli-service test:e2evue-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详解(十八)
    在这里插入图片描述
  2. CDN_ENV=loca :为 process.env 添加一个 keyCDN_ENV 的属性,值为 local
  3. 当命令中包含&时,代表并行执行,&&代表顺序执行
  4. 我们 只可以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_ENVdevelopment ,然后依次执行 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 上。

npm scripts 使用指南

猜你喜欢

转载自blog.csdn.net/weixin_43314846/article/details/107363567