npm(你怕嗎) 全局安裝與本地安裝、開發依賴和生產依賴

npm（你怕嗎）

npm(Node Package Manager)是 JavaScript 世界的包管理工具,而且是 Node.js 平臺的默認包管理工具。經過 npm 能夠安裝、共享、分發代碼,管理項目依賴關係。（與其有一樣功能的另外一個包管理工具yarn，速度用體驗比舊版本的npm好，但npm最近的新版本也作出很大努力，與yarn速度和體驗差距愈來愈小，有興趣能夠了解下）。

npm這幾年能夠說是前端猿平常離不開的工具了，剛開始學習使用node、npm來進行前端項目構建的時候，有不少概念須要理解，各類命令行、各類新js語法、各類環境依賴...就問你怕嗎？：

講真，剛開學時我怕。廢話很少扯，如今咱們進入主題，聊聊npm 全局安裝與本地安裝、開發依賴和生產依賴，先拋幾個常見疑惑：

1. 什麼是全局安裝、什麼是本地安裝(或叫局部安裝，下文統一叫本地安裝) ？
2. 爲何要全局安裝？爲何又要本地安裝？全局安裝和本地安裝有什麼區別？
3. 什麼叫開發依賴、生產依賴？什麼又是開發環境、生產環境？

全局安裝與本地安裝

1、全局安裝：

npm install <pageName> -g//（這裏-g是-global的簡寫）

經過上面的命令行（帶-g修飾符）安裝某個包，就叫全局安裝。一般全局包安裝在node目錄下的node_modules文件夾。能夠經過執行下面幾條命令查看node、npm的安裝目錄和全局包的安裝目錄。

which node   // 查看node的安裝目錄
which npm   // 查看npm的安裝目錄
npm root -g // 查看全局包的安裝目錄
npm list -g --depth 0 //查看全局安裝過的包

2、本地安裝:

npm install <pageName> (後面能夠加幾種修飾符，主要有兩種--save-dev和--save)

經過上面的命令行安裝某個包，就叫本地安裝。包安裝在你當前項目文件夾下的node_modules文件夾中。

3、全局安裝的做用:

全局安裝的包可提供直接執行的命令(例：gulp -h能夠查看gulp定義了什麼命令)。 好比gulp全局安裝後，能夠在命令行上直接執行gulp -v、gulp -h等（原理：全局安裝的gulp會將其package.json中的bin命令注入到了全局環境，使得你能夠全局執行：gulp xxx命令，這另外一個話題了，不深刻）。假若只在本地安裝了gulp，未在全局安裝gulp，直接執行這些命令會報錯。你想要執行相應的命令則可能須要例如：node ./node_modules/gulp/bin/gulp.js -v(查看版本) 這樣用一大串命令來執行。所以全局安裝就發揮到他的好處了，一個gulp -v就搞定

固然，不是每一個包都必需要全局安裝的，通常在項目中須要用到該包定義的命令才須要全局安裝。好比gulp <taskName>執行gulp任務...等，因此是否須要全局安裝取決於咱們如何使用這個包。全局安裝的就像全局變量有點粗糙，但在某些狀況下也是必要的，全局包很重要，但若是不須要，最好避免使用。

4、能夠全局安裝，那麼直接全局安裝處處使用就好了，幹嗎還須要本地安裝？

1. 若是隻是全局安裝了而沒本地安裝，就得require('<pagePath>') 例：引入一個全局的包可能就是requirt('/usr/local/....')經過全局包的路徑引入，這樣顯然十分的不靈活。若是安裝了本地包，那麼就能夠直接require('<pageName>')引入使用。
2. 一個包一般會在不一樣的項目上會重複用到，若是隻全局安裝，那麼當某個項目須要該包更新版本時，更新後可能就會影響到其餘一樣引用該包的項目，所以本地安裝能夠更靈活地在不一樣的項目使用不一樣版本的包，並避免全局包污染的問題，

一個經驗法則：要用到該包的命令執行任務的就須要全局安裝，要經過require引入使用的就須要本地安裝（ 但實際開發過程當中，咱們也不怎麼須要考慮某個包是全局安裝仍是本地安裝，由於這一點在該包的官網上通常會明確指出，以上是爲了理解全局安裝和本地安裝）

開發依賴和生產依賴

順着上面講到的本地安裝，本地安裝有兩種主要的安裝方式：

1. 保存到開發依賴(devDependencies): npm install <pageName> --save-dev
2. 保存到生產依賴(dependencies): npm install <pageName> --save

"開發依賴"顧名思義在開發環境中用到的依賴，"生產依賴"在生產環境中用到的依賴。那麼這裏又延伸出個問題什麼是開發環境、什麼是生產環境？

1、開發環境和生產環境

【開發環境】：指的是你的項目尚且在編碼階段時的環境。你在代碼可能還有各類console.log()、註釋、格式化等。
【生產環境】：指的是你的項目已經完成編碼，併發布上線可供用戶瀏覽的階段時的環境。代碼可能通過了壓縮、優化等處理。

這些概念其實並無一個很明確的定義，接下來咱們舉例個場景，將"開發環境"、"生產環境"和上面的"開發依賴"、"生產依賴"聯繫起來就會比較容易理解的了。假如咱們在開發過程當中使用jQuery。在以往，可能就是把jQuery這個插件下載的本地，再通<script>引入html中。但這有個不方便的地方，咱們每次進行一個項目的時候就得手動複製這個jQuery文件到咱們的項目中，若是想要換個版本又得官網上下載、隨着項目愈來愈多。用到的插件、庫也隨之越繁雜...這樣會形成自家用的插件管理繁瑣的問題。所以就出現了npm(包管理工具)你須要用到什麼，直接經過一條命令行就能夠將想要的插件下載下來，並直接引入到項目中，目前幾乎全部的js插件都能在npm上直接下載。

2、生產依賴

回到環境和依賴話題，咱們下載的jQuery，在開發時參與源碼編寫，在發佈上線的生產環境中也是須要它的。不只在開發環境編寫代碼時要依賴它、線上環境也要依賴它，所以將它歸類爲"生產依賴"，安裝時執行npm install jquery --save，它就會被記錄在package.json的dependencies。當進行代碼打包時，會將這裏的jQuery打包入咱們的項目代碼中。

3、開發依賴

接着，假如咱們用gulp對html進行壓縮，咱們一般會用到一個插件gulp-htmlmin。咱們只但願它把html壓縮完就ok了，並不但願它融入咱們的項目代碼中，即只存在於開發環境，所以把他歸類爲"開發依賴"。安裝時執行npm install gulp-htmlmin --save-dev它就會被記錄在package.json的devependencies下，當進行代碼打包時，不會將這裏的gulp-htmlmin插件源碼打包入咱們的項目代碼中

devDependencies只會在開發環境下使用，生產環境不會被打入包內；而dependencies不只在開發環境中要使用，生產環境也須要使用到。根據以上規則，咱們就很容易區分哪些插件是用--save-dev模式安裝，哪些用--save模式安裝。

最後

文章開頭的問題以上已經一一回答了。剛開始時本身也會有不少相似這樣的疑問，哪怕已經使用npm的各類包構建過很多項目，對這些概念仍是會有點模糊，使用固然是會使用的，但沒有一個比較清晰的總結。全部花了點時間，到各社區、node、npm官網蒐集關於以上問題的一些答案、簡單作個筆記和總結。 畢竟總結並記錄下來的東西纔是本身的。也但願能夠幫助有一樣疑問的朋友，如發現文章有不對的地方望指出，謝謝