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

偏执的太偏执、 2023-02-26 11:28 47阅读 0赞

# `"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的问题][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` 设置变量 `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` 。

1.  `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详解(十八)][webpack_process.env.NODE_ENV]）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]
2.  `CDN_ENV=loca` ：为 `process.env` 添加一个 `key` 为 `CDN_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][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` 上。

[npm scripts 使用指南][npm scripts]

[cross-env_NODE_ENV]: https://segmentfault.com/a/1190000005811347
[webpack_process.env.NODE_ENV]: https://www.cnblogs.com/tugenhua0707/p/9780621.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]: /images/20230209/1242dd33510a4f7fb04070632b93c1a3.png
[NODE_ENV_webpack]: https://juejin.im/post/5a4ed5306fb9a01cbc6e2ee2
[npm scripts]: http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html

发表评论取消回复

表情：

评论列表（有 0 条评论，47人围观）

还没有评论，来说两句吧...

相关阅读

相关 npm install报错了，重新npm install时候要注意什么

当你在重新运行 npm install 命令时，可能需要注意以下几点：检查网络连接：确保你的计算机能够访问互联网，并且你的网络连接是稳定的。如果你的网络连接不稳定，

我会带着你远行/ 2024年02月19日 08:41/ 0 赞/ 70 阅读

相关三面面试官：运行 npm run xxx 的时候发生了什么？

![format_png][] 事情是这样的，直接开讲面试官：npm run xxx的时候，发生了什么？讲的越详细越好。我（心想，简单啊）：首先，DNS 解析,

浅浅的花香味﹌/ 2023年09月23日 15:27/ 0 赞/ 65 阅读

相关三面面试官：运行 npm run xxx 的时候发生了什么？

![format_png][] 事情是这样的，直接开讲面试官：npm run xxx的时候，发生了什么？讲的越详细越好。我（心想，简单啊）：首先，DNS 解析,

野性酷女/ 2023年09月23日 15:19/ 0 赞/ 73 阅读

相关三面面试官：运行 npm run xxx 的时候发生了什么？

事情是这样的，直接开讲面试官：npm run xxx的时候，发生了什么？讲的越详细越好。我（心想，简单啊）：首先，DNS 解析,将域名解析成 IP 地址，然后 T

╰半夏微凉°/ 2023年09月23日 13:07/ 0 赞/ 83 阅读

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

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

偏执的太偏执、/ 2023年02月26日 11:28/ 0 赞/ 48 阅读

相关【Vue】npm run serve 和 npm run dev 有什么区别

【Vue】npm run serve 和 npm run dev 有什么区别 Q：我的粉丝私信我，项目中运行的npm run serve 和 npm run dev 有

朴灿烈づ我的快乐病毒、/ 2022年09月12日 12:57/ 0 赞/ 207 阅读

相关 malloc()之后，内核发生了什么？

考虑这样一种常见的情况：用户进程调用malloc()动态分配了一块内存空间，再对这块内存进行访问。这些用户空间发生的事会引发内核空间的那些反映？本文将简单为您解答。 1.b

爱被打了一巴掌/ 2022年08月13日 16:54/ 0 赞/ 230 阅读

相关输入URL后发生了什么？

![2][] 1. DNS域名解析在浏览器DNS缓存中搜索在操作系统DNS缓存中搜索读取系统hosts文件，查找其中是否有对应的ip 向本

水深无声/ 2022年07月17日 04:44/ 0 赞/ 256 阅读

相关 vue项目工程中npm run dev 到底做了什么

1. npm install 安装了webpack框架中package.json中所需要的依赖 2.安装完成之后，需要启动整个项目运行，npm run 其实执行了packa

墨蓝/ 2021年10月13日 01:39/ 0 赞/ 347 阅读

相关 new Vue 发生了什么

`new Vue` 发生了什么 1. `mergeOptions` 合并`options` 2. `initLifecycle(vm)` 初始化生命周期

左手的ㄟ右手/ 2021年06月26日 16:06/ 0 赞/ 499 阅读