天天看点

一行npm命令打包两个node版本不同的项目

背景:公司后台管理系统的代码是angularjs项目和vue项目在一起混搭,vue项目其实是属于angularjs的子项目。如图:

一行npm命令打包两个node版本不同的项目

问题:之前在用svn发布上线时,都是手动通过nvm执行两次node版本切换,再执行两次打包命令。迁移git要自动发布,就要考虑将四条命令合并成一一条命令。

解决方案:​

    1.  老后台使用的gulp打包,node版本v6.9.2。如下,老后台gulp在打包时会执行一条clean的task,这条任务会将dist目录下面的所有资源全部清除掉。​​​​​​

一行npm命令打包两个node版本不同的项目

        现在因为vue-admin的项目打包之后的静态资源需要存放在dist/vue下面,所以clean这条任务就需要做个小改动,清除掉除了vue子项目之后的其他资源。如下

一行npm命令打包两个node版本不同的项目

       vue-admin项目的打包也需要做一些修改,如下 。

一行npm命令打包两个node版本不同的项目

        现在在编译机器上通过固定的命令来编译,其实这个不修改也没关系。最开始修改这个主要是因为,提交代码是需要提交dist目录,本地自己去打好包,自己打包就会存在打包的先后问题,如果先打vue的包,再打angularjs的包,gulp就会把dist/vue目录一起清掉。

    2.  明确一下接下来要做的事情:想要达到的效果,在angularjs项目根目录,执行npm run build:test,这条命令可包含以下所有操作:

         (1) nvm use v6.9.2  -- node版本切换到6.9.2

         (2) npm run gulp    --执行angularjs项目打包

         (3) cd vue-admin   --进入到vue-admin项目目录,准备打包编译vue项目

         (4) nvm use 10.16.2   -- node 版本切换到10.16.2

         (5) npm run build:test   执行vue项目测试环境的打包

        以上5步需要同步执行,因为打包的node版本是不一样的。linux环境中 每条scripts使用  '&&'  则表示同步执行.

       修改打包命令,如下 

一行npm命令打包两个node版本不同的项目

      重点的两条命令已经用红框圈起来了,其中build:vue:test中的--prefix的作用就是指定目录执行打包命令。

      然后,build:test中的source ~/.nvm/nvm.sh这个如果不添加,会报nvm command not found的错误(即使你的nvm已经正常安装),我在网上查到的原因是说 linux中执行shell脚本就需要执行前面的小段代码,应该是指定nvm的安装路径的吧。。。

      剩下npm run build:mirror和npm run build:online的解释同上。