npm模塊安裝機制簡介及發包流程

1、npm是什麼？

npm 是 JavaScript 世界的包管理工具，而且是 Node.js 平臺的默認包管理工具。經過 npm 能夠安裝、共享、分發代碼，管理項目依賴關係。

NPM 的思路大概是這樣的：

⒈ 買個服務器做爲代碼倉庫（registry），在裏面放全部能夠被共享的代碼

⒉ 發郵件通知 jQuery、Bootstrap、Underscore 做者使用 npm publish 把代碼提交到 registry 上，分別取名 jquery、bootstrap 和 underscore（注意大小寫）

⒊ 社區裏的其餘人若是想使用這些代碼，就把 jquery、bootstrap 和 underscore 寫到 package.json 裏，而後運行 npm install ，npm 就會幫他們下載代碼

⒋下載完的代碼出如今 node_modules 目錄裏，就能夠在項目中隨意使用了。這些能夠被使用的代碼被叫作「包」（package），這就是 NPM 名字的由來：Node Package(包) Manager(管理器)。

2、安裝Node.js和NPM

【1】安裝node和npm

npm是用node.js編寫的，所以您須要安裝node.js才能使用npm。

在node.js官網下載安裝包，傻瓜式安裝。

安裝node.js後，就已經自帶npm（包管理工具），不須要另外再進行安裝npm了。

終端輸入命令檢查是否安裝成功，若是輸出版本號，說明咱們安裝node環境成功

​

【2】安裝npm

// 安裝指定版本
npm install npm @版本號

// 安裝最新版本
npm install npm @latest -g

// 安裝報錯，提示用root權限去執行，能夠執行
sudo npm install npm @latest -g

// 安裝下一個未發佈的npm版本
npm install npm@next -g

複製代碼

3、npm安裝包

【1】安裝包命令

npm install <package_name> // package_name: 包名複製代碼

上述命令執行以後將會在當前的目錄下建立一個node_modules的目錄(若是不存在的話)，而後將下載的包保存到這個目錄下。安裝完成以後，你就可使用它了

【2】npm install 過程

① 發出 npm install 命令

② 查詢node_modules目錄之中是否已經存在指定模塊，若存在，再也不從新安裝

③ 若不存在，npm 向 registry 查詢模塊壓縮包的網址

④ 下載壓縮包，存放在根目錄下的.npm目錄裏

⑤ 解壓壓縮包到當前項目的node_modules目錄

注意： 一個模塊安裝之後，本地其實保存了兩份。一份是.npm目錄下的壓縮包，另外一份是node_modules目錄下解壓後的代碼。可是，運行npm install 的時候，只會檢查node_modules目錄，而不會檢查.npm目錄。也就是說，若是一個模塊在.npm下有壓縮包，可是沒有安裝在node_modules目錄中，npm 依然會從遠程倉庫下載一次新的壓縮包。

【3】強制從新安裝

若是你但願，一個模塊不論是否安裝過，npm 都要強制從新安裝，可使用-f或--force參數。

$ npm install <package-name> --force複製代碼

4、npm搭檔package.json

package.json文件很是重要，所以須要單獨一篇文章介紹。 ★package.json文件解析★

package.json用於管理你所安裝的npm包的依賴，在開發過程當中能清楚的查詢安裝的包的版本以及項目中使用的包依賴，便於開發組成員共享。以及項目的配置信息（好比名稱、版本號、項目描述、許可證等元數據）。運行npm install命令能夠自動下載package.json文件中運行和開發環境中所需的依賴

【1】dependencies

--save 安裝的插件 ，被寫入到 dependencies 對象裏面去

dependencies 裏面的插件是須要發佈到生產環境的。

npm install <package_name> --save複製代碼

【2】devDependencies

--save-dev 安裝的插件，被寫入到 devDependencies 對象裏面去

devDependencies 裏面的插件只用於開發環境，不用於生產環境

npm install <package_name> --save-dev複製代碼

【3】管理依賴關係版本

若是你有package.json文件在您的目錄中，而後運行npm install，NPM將查看該文件中列出的依賴項，並下載最新版本。

5、npm update

若是想更新已安裝模塊，就要用到 npm update 命令。它會先到遠程倉庫查詢最新版本，而後查詢本地版本。若是本地版本不存在，或者遠程版本較新，就會安裝。

npm update <package_name>複製代碼

6、npm uninstall

如需刪除node_modules目錄下面的包，請執行

npm uninstall <package>複製代碼

如需從package.json文件中刪除依賴，須要在命令後添加參數--save或--save-dev

npm uninstall --save <package>

npm uninstall --save-dev <package>複製代碼

7、npm發包流程

【1】準備工做

① 在npm官網上註冊一個帳號

② 註冊成功以後，npm會發送一封郵件給你，點擊郵件裏面的連接，作確認關聯操做（必需）

【2】建立本身的npm包

① 建立一個新目錄

② 使用命令cd 進入到這個目錄，執行npm init 命令初始化當前項目信息

​

說明：

• package name：填寫你這個包的名字，默認是你這個文件夾的名字
• version：填寫你這個包的版本，默認1.0.0
• description：描述一下你這個包是幹嗎用的
• entry point：入口文件，默認是index.js，你也能夠本身填寫你本身的文件名
• test command：測試命令，默認爲空，直接回車就行
• git repository：git倉庫地址，若是你的包是先放到github上或者其餘git倉庫裏，這時候你的文件夾裏面會存在一個隱藏的.git目錄，npm會讀到這個目錄做爲這一項的默認值。若是沒有的話，直接回車繼續。
• keywords：關鍵詞，方便別人搜到這個包
• author：你的帳號
• license： 你的這個包遵循什麼開源協議，直接回車就行

而後就會問你 Is this ok?(yes)，讓你確認信息，直接回車鍵，回到目錄文件夾下，多了一個package.json文件，打開這個文件裏面的信息就是剛纔填寫的信息。

③ 在目錄文件夾下新建一個index.js入口文件，裏面填寫須要發佈的內容，例如：添加一個獲取當前瀏覽器查詢參數方法

exports.getUrlParams = function(key) {
    let search = window.location.search.replace(/^\?/, "");
    let pairs = search.split("&");
    let paramsMap = pairs.map(pair => {
        let [key, value] = pair.split("=");
        return [decodeURIComponent(key), decodeURIComponent(value)];
    }).reduce((res, [key, value]) => Object.assign(res, { [key]: value }), {});
    return paramsMap[key] || "";
}複製代碼

【3】發佈包

① 登陸npm，執行npm login 命令登陸，按照提示填寫對應的內容

​② 在發佈以前能夠在npm官網裏搜索一下有沒有和你包名字同樣的包

​

③ 發現已有大神使用這個包名，這時候若是執行npm publish發包命名將會報如下錯誤，說明名字衝突

You do not have permission to publish "get-url-params". Are you logged in as the correct user? : get-url-params複製代碼

④ 打開目錄下的package.json文件，修改一下name包名的值，再npm publish，發包成功

​

⑤ 上npm官網裏搜索剛剛發佈的包，如圖

​

【3】下載測試本身發佈的包

① 安裝

​② 使用

import { getUrlParams } from 'get-url-query-params'
export default {
    methods: {
        getParams() {
            // 當前瀏覽器url爲：http://localhost:8088/todayMeetingMessage.html?organizeCode=121212#/
            console.log(getUrlParams('organizeCode')) // 結果爲：121212
        }
    },
}複製代碼

【4】更新包

更新npm包一樣是執行npm publish便可，同時須要修改版本號

最簡單方式無非就是改package.json文件的version字段或者能夠執行命令： npm version 1.0.1 一樣能夠起到修改版本號做用

對於npm包的版本號有着一系列的規則，模塊的版本號採用X.Y.Z的格式，具體體現爲：
一、修復bug，小改動，增長z。
二、增長新特性，可向後兼容，增長y
三、有很大的改動，沒法向下兼容,增長x

【5】刪除包

終端執行 npm unpublish

npm unpublish get-url-query-params@1.0.0 // 刪除某個版本 @後面接版本號
npm unpublish get-url-query-params --force // 刪除整個npm市場的包複製代碼