對於jenkins上前端項目 npm 或 yarn 打包 及 部署 使用

1.npm和yarn鏡像源地址

npmMirror ~~~~~ https://skimdb.npmjs.com/registry/
edunpm   ~~~~~~ http://registry.enpmjs.org/
taobao   ~~~~~~ https://registry.npm.taobao.org/
cnpm     ~~~~~~ http://r.cnpmjs.org/
npm      ~~~~~~ https://registry.npmjs.org/
yarn     ~~~~~~ https://registry.yarnpkg.com/
nj       ~~~~~~ https://registry.nodejitsu.com/

 

2.Yarn

“Yarn是由Facebook、Google、Exponent 和 Tilde 聯合推出了一個新的 JS 包管理工具 ，正如官方文檔中寫的，Yarn 是為了彌補 npm 的一些缺陷而出現的。”這句話讓我想起了使用npm時的坑了： npm install的時候巨慢。特別是新的項目拉下來要等半天，刪除node_modules，重新install的時候依舊如此。

同一個項目，安裝的時候無法保持一致性。由於package.json文件中版本號的特點，下面三個版本號在安裝的時候代表不同的含義。
(1)"5.0.3" ：表示安裝指定的5.0.3版本
(2)"~5.0.3"：表示安裝5.0.X中最新的版本
(3)"^5.0.3"：表示安裝5.X.X中最新的版本

這就麻煩了，常常會出現同一個項目，有的同事是OK的，有的同事會由於安裝的版本不一致出現bug。

2.1安裝yarn

#官網地址
https://www.yarnpkg.com/en/docs/install#centos-stable

[root@node ~]# curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo

[root@node ~]# curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -

[root@node ~]# yum -y install yarn

 

2.2.yarn優點

 速度快 。速度快主要來自以下兩個方面：
（1）並行安裝：無論 npm 還是 Yarn 在執行包的安裝時，都會執行一系列任務。npm 是按照隊列執行每個 package，也就是說必須要等到當前 package 安裝完成之后，才能繼續后面的安裝。而 Yarn 是同步執行所有任務，提高了性能。
（2）離線模式：如果之前已經安裝過一個軟件包，用Yarn再次安裝時之間從緩存中獲取，就不用像npm那樣再從網絡下載了。

2.3.yarn命令

# cd /home/meisapp/.jenkins/workspace/"前端項目目錄"

#更換yarn源為淘寶源
yarn config set registry https://registry.npm.taobao.org/

#檢查yarn當前源
yarn config get registry

#安裝依賴
yarn install

#yarn構建前端項目
yarn run build:dev

3.npm

npm全稱為Node Package Manager，是一個基於Node.js的包管理器，也是整個Node.js社區最流行、支持的第三方模塊最多的包管理器。
npm的初衷：JavaScript開發人員更容易分享和重用代碼。

3.1.使用場景

（1）允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
（2）允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
（3）允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用

3.2.npm部署

1.root 登錄linux

2.沒有目錄就自己創建一個
cd /home/meisapp/node/

3.下載安裝包
wget https://npm.taobao.org/mirrors/node/v4.4.7/node-v4.4.7-linux-x64.tar.gz

4.解壓安裝包
tar -zxvf node-v4.4.7-linux-x64.tar.gz

5.移除安裝包
rm -rf node-v4.4.7-linux-x64.tar.gz

6.建立軟連接
ln -s /home/meisapp/node/node-v4.4.7-linux-x64/bin/npm /usr/local/bin/npm
ln -s /home/meisapp/node/node-v4.4.7-linux-x64/bin/node /usr/local/bin/node

7.查看npm版本
npm -v

8.npm升級，@后面是版本號
npm i -g npm@3.3.1


安裝完成。

3.3.npm命令

# cd /home/meisapp/.jenkins/workspace/"前端項目目錄"

#更換yarn源為淘寶源
npm config set registry https://registry.npm.taobao.org/

#檢查yarn當前源
npm config get registry

#安裝依賴
npm install

#yarn構建前端項目
npm run build:dev