npm包管理器那些事！

今天和朋友針對npm包全局安裝和本地項目安裝這個梗展開的激烈的討論，故此做一個總結！

什么是包管理器？

我最早接觸這個概念的時候是在linux上（redhat小紅帽），記得當時要編譯安裝一個apache，安裝的過程坎坷到了極點，不是缺少這個包就是這個包依賴那個包，更有甚是你明明所有的包都有，唯獨安裝順序顛倒了也會報錯，所以當時接觸了yum包管理器（神器啊）一條命令yum install apache 完活。（后續有時間詳細介紹）

從此時我對linux產生了濃厚的興趣，后來慢慢接觸了ubuntu不管是從界面還是操作上比redhat上升了不是一個台階啊（個人見解），故此我接觸了第二個包管理器 apt-get（后續有時間詳細介紹）

自從開始做前端開發之后學習node接觸了node的包管理器npm，淘寶的cnpm以及FaceBook開發的yarn

說了這么多它們能干什么有什么用呢它們有什么區別呢？

所有的包管理器都有一個共同的目標，安裝、管理、解決你的安裝包依賴

它們的特點

yum和apt-get這里不做介紹，主要針對npm、cnpm、yarn

yarn

yarn是FaceBook開發的包管理器-- 解決npm歷史遺留的痛點
特點

• 極速，Yarn 會緩存它下載的每個包，所以不需要重復下載
• 安全，Yarn 在每個安裝包的代碼執行前使用校驗碼驗證包的完整性。
  具體的使用請移駕Yarn官網手冊

npm

npm全稱Node Package Manager，他是node包管理和分發工具
由於npm的軟件源地址在國外，所以會出現速度慢很多包安裝不上時候

解決方案一

//通過config命令：先運行以下命令，再安裝node包即可
npm config set registry http://registry.cnpmjs.org
npm install webpack

通過上面的命令實際的意識是告訴npm你下載包的時候給我從這個地址下載

解決方案二 cnpm

cnpm只不過是npm在國內的鏡像

//cnpm方式安裝：先安裝cnpm，再利用cnpm安裝，例如webpack等
npm install -g cnpm
cnpm install -g webpack

npm和cnpm的區別

npm install 本地安裝與全局安裝的區別

npm的包安裝分為本地安裝(local)、全局安裝(global)兩種，比如：

//安裝在本地
npm install webpack 
//安裝在本地並添加進package.json版本依賴中
npm install webpack --save-dev
//全局安裝
npm install -g webpack

• 本地安裝

  • 將安裝包放在./node_modules/
  • 可以通過require()來引入本地安裝的包

  例如：

  npm install karma --save-dev
  

  安裝成功之后會在你當前目錄中的node_modules/karma
  我們使用的時候直接require('karma')就可以使用
  此時全局沒有安裝karma那么命令行怎么辦？

  //搞定
  node_modules/karma/bin/karma init
  

• 全局安裝

  • 將安裝包放在/usr/local下
  • 可以直接在命令行中直接使用
    例如：

  //安裝全局的karma
  npm install -g karma
  //全局安裝之后記得在本地安裝下並添加進版本依賴中
  npm install katma --save-dev
  //全局安裝完成之后就可以在命令行中直接執行
  karma init
  

ok到這里問題都出來了

全局安裝報錯

如果您是linux或者Mac Os 系統並且非root用戶會出現如下報錯

這是因為全局安裝的模塊是安裝在了/usr/local/下，您當前的用戶沒有對/usr/local目錄的寫入權限導致的，解決辦法：

//意思就是要用管理員的身份去執行
//super user do npm install -g karma
sudo npm install -g karma
//此時輸入您的登陸密碼就可以了

使用npm腳本

首先先說一下何為全局？又何為本地安裝？
拋開package.json的版本依賴先不說，這兩種安裝方式只不過是安裝的位置不同罷了！咱們翻譯下全局安裝和本地安裝這兩條命令

//上面說了全局安裝的是/usr/local/其實全局安裝只不過是給你添加了一個環境變而已
//karma="/usr/loacl/bin/node_modules/karma/bin/karma"

karma init --> /usr/loacl/bin/node_modules/karma/bin/karma init

//翻譯下本地安裝,就是安裝在你的當前項目中的node_modules
./node_modules/karma/bin/karma init

什么是npm腳本？
npm 允許在package.json文件里面，使用scripts字段定義腳本命令。

"scripts": {
    "start": "node server.js",
	"karma":"karma start"
}

執行的時候npm run karma
這些定義在package.json里面的腳本，就稱為 npm 腳本。
npm run在執行的時候會將當前目錄的node_modules/.bin子目錄加入PATH變量，執行結束后，再將PATH變量恢復原樣。
所以咱們沒有必要寫成下面這樣

"scripts": {
	"karma":"node_modules/karma/bin/karma start"
}

npm腳本的鈎子

npm 腳本有pre和post兩個鈎子，比如：

"scripts": {
    "pretest":"karma start",
	"test":"karma start",
	"posttest":"opener http://localhost:9090"
}

當執行npm run test的時候它們會一次執行

npm run pretest && npm run test && posttest

如何利用npm腳本去優雅的裝逼

咱們可以利用npm腳本鈎子的特性可以這么玩

{
  "name": "karmademo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "karma start",//提供一個單獨的單元測試腳本
    "prestart": "npm install && karma start",//start開始前先下載所有的依賴包並且跑一邊單元測試
    "start": "pm2 serve ",//用pm2去啟動一個簡單的服務器
    "poststart": "opener http://localhost:8080",//用opener打開瀏覽器並打開項目網址
    "stop": "pm2 stop all",//提供一個停止服務的腳本
    "restart": "pm2 stop all && npm start"//提供一個重啟服務器的腳本
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jasmine-core": "^2.8.0",
    "jquery": "^3.2.1",
    "karma": "^1.7.1",
    "karma-jasmine": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "opener": "^1.4.3",
    "pm2": "^2.7.2",
    "serve": "^6.4.0",
    "systemjs": "^0.20.19",
    "systemjs-plugin-babel": "0.0.25"
  }
}

在命令行中的執行結果是這個樣子的

npm start

npm stop

npm restart

github項目地址：https://github.com/zhaoshuoer/praiseButton

本文參考地址：https://www.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/