npm包管理器那些事

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()來引入本地安裝的包
  例如：
  shell npm install karma --save-dev
  安裝成功以後會在你當前目錄中的node_modules/karma
  咱們使用的時候直接require('karma')就可使用
  此時全局沒有安裝karma那麼命令行怎麼辦？
  shell //搞定 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/