一磕瓷、npm是什么？

npm 是 JavaScript 世界的包管理工具沿猜，并且是 Node.js 平臺的默認(rèn)包管理工具枚荣。通過 npm 可以安裝、共享啼肩、分發(fā)代碼橄妆，管理項(xiàng)目依賴關(guān)系衙伶。

NPM 的思路大概是這樣的：

⒈ 買個服務(wù)器作為代碼倉庫（registry），在里面放所有可以被共享的代碼

⒉ 發(fā)郵件通知 jQuery害碾、Bootstrap矢劲、Underscore 作者使用 npm publish 把代碼提交到 registry 上，分別取名 jquery慌随、bootstrap 和 underscore（注意大小寫）

⒊ 社區(qū)里的其他人如果想使用這些代碼芬沉，就把 jquery、bootstrap 和 underscore 寫到 package.json 里儒陨，然后運(yùn)行 npm install 花嘶，npm 就會幫他們下載代碼

⒋下載完的代碼出現(xiàn)在 node_modules 目錄里笋籽，就可以在項(xiàng)目中隨意使用了蹦漠。這些可以被使用的代碼被叫做「包」（package），這就是 NPM 名字的由來：Node Package(包) Manager(管理器)车海。

二笛园、安裝Node.js和NPM

【1】安裝node和npm

npm是用node.js編寫的，因此您需要安裝node.js才能使用npm侍芝。

在node.js官網(wǎng)下載安裝包研铆，傻瓜式安裝。

安裝node.js后州叠，就已經(jīng)自帶npm（包管理工具）棵红，不需要另外再進(jìn)行安裝npm了。

終端輸入命令檢查是否安裝成功咧栗，如果輸出版本號逆甜，說明我們安裝node環(huán)境成功

image

【2】安裝npm

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

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

// 安裝報錯，提示用root權(quán)限去執(zhí)行致板，可以執(zhí)行
sudo npm install npm @latest -g

// 安裝下一個未發(fā)布的npm版本
npm install npm@next -g

三交煞、npm安裝包

【1】安裝包命令

npm install <package_name> // package_name: 包名

上述命令執(zhí)行之后將會在當(dāng)前的目錄下創(chuàng)建一個node_modules的目錄(如果不存在的話)，然后將下載的包保存到這個目錄下斟或。安裝完成之后素征，你就可以使用它了

【2】npm install 過程

① 發(fā)出 npm install 命令

② 查詢node_modules目錄之中是否已經(jīng)存在指定模塊，若存在萝挤，不再重新安裝

③ 若不存在御毅，npm 向 registry 查詢模塊壓縮包的網(wǎng)址

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

⑤ 解壓壓縮包到當(dāng)前項(xiàng)目的node_modules目錄

注意： 一個模塊安裝以后怜珍，本地其實(shí)保存了兩份亚享。一份是.npm目錄下的壓縮包，另一份是node_modules目錄下解壓后的代碼绘面。但是欺税，運(yùn)行npm install 的時候侈沪，只會檢查node_modules目錄，而不會檢查.npm目錄晚凿。也就是說亭罪，如果一個模塊在.npm下有壓縮包，但是沒有安裝在node_modules目錄中歼秽，npm 依然會從遠(yuǎn)程倉庫下載一次新的壓縮包应役。

【3】強(qiáng)制重新安裝

如果你希望，一個模塊不管是否安裝過燥筷，npm 都要強(qiáng)制重新安裝箩祥，可以使用-f或--force參數(shù)。

$ npm install <package-name> --force

四肆氓、npm搭檔package.json

package.json文件非常重要袍祖，因此需要單獨(dú)一篇文章介紹。 ★package.json文件解析★

package.json用于管理你所安裝的npm包的依賴谢揪，在開發(fā)過程中能清楚的查詢安裝的包的版本以及項(xiàng)目中使用的包依賴蕉陋，便于開發(fā)組成員共享。以及項(xiàng)目的配置信息（比如名稱拨扶、版本號凳鬓、項(xiàng)目描述、許可證等元數(shù)據(jù)）患民。運(yùn)行npm install命令可以自動下載package.json文件中運(yùn)行和開發(fā)環(huán)境中所需的依賴

【1】dependencies

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

dependencies 里面的插件是需要發(fā)布到生產(chǎn)環(huán)境的。

npm install <package_name> --save

【2】devDependencies

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

devDependencies 里面的插件只用于開發(fā)環(huán)境仅孩，不用于生產(chǎn)環(huán)境

npm install <package_name> --save-dev

【3】管理依賴關(guān)系版本

如果你有package.json文件在您的目錄中，然后運(yùn)行npm install惋嚎，NPM將查看該文件中列出的依賴項(xiàng)杠氢，并下載最新版本。

五另伍、npm update

如果想更新已安裝模塊鼻百，就要用到 npm update 命令。它會先到遠(yuǎn)程倉庫查詢最新版本摆尝，然后查詢本地版本温艇。如果本地版本不存在，或者遠(yuǎn)程版本較新堕汞，就會安裝勺爱。

npm update <package_name>

六、npm uninstall

如需刪除node_modules目錄下面的包讯检，請執(zhí)行

npm uninstall <package>

如需從package.json文件中刪除依賴琐鲁，需要在命令后添加參數(shù)--save或--save-dev

npm uninstall --save <package>

npm uninstall --save-dev <package>

七卫旱、npm發(fā)包流程

【1】準(zhǔn)備工作

① 在npm官網(wǎng)上注冊一個賬號

② 注冊成功之后，npm會發(fā)送一封郵件給你围段，點(diǎn)擊郵件里面的鏈接顾翼，做確認(rèn)關(guān)聯(lián)操作（必需）

【2】創(chuàng)建自己的npm包

① 創(chuàng)建一個新目錄

② 使用命令cd 進(jìn)入到這個目錄，執(zhí)行npm init 命令初始化當(dāng)前項(xiàng)目信息

image

?

說明：

• package name：填寫你這個包的名字奈泪，默認(rèn)是你這個文件夾的名字
• version：填寫你這個包的版本适贸，默認(rèn)1.0.0
• description：描述一下你這個包是干嘛用的
• entry point：入口文件，默認(rèn)是index.js涝桅，你也可以自己填寫你自己的文件名
• test command：測試命令拜姿，默認(rèn)為空，直接回車就行
• git repository：git倉庫地址冯遂，如果你的包是先放到github上或者其他git倉庫里蕊肥，這時候你的文件夾里面會存在一個隱藏的.git目錄，npm會讀到這個目錄作為這一項(xiàng)的默認(rèn)值债蜜。如果沒有的話晴埂，直接回車?yán)^續(xù)究反。
• keywords：關(guān)鍵詞寻定，方便別人搜到這個包
• author：你的賬號
• license： 你的這個包遵循什么開源協(xié)議，直接回車就行

然后就會問你 Is this ok?(yes)精耐，讓你確認(rèn)信息狼速，直接回車鍵，回到目錄文件夾下卦停，多了一個package.json文件向胡，打開這個文件里面的信息就是剛才填寫的信息。

③ 在目錄文件夾下新建一個index.js入口文件惊完，里面填寫需要發(fā)布的內(nèi)容僵芹，例如：添加一個獲取當(dāng)前瀏覽器查詢參數(shù)方法

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】發(fā)布包

① 登錄npm，執(zhí)行npm login 命令登錄小槐，按照提示填寫對應(yīng)的內(nèi)容

image

?

② 在發(fā)布之前可以在npm官網(wǎng)里搜索一下有沒有和你包名字一樣的包

image

③ 發(fā)現(xiàn)已有大神使用這個包名拇派，這時候如果執(zhí)行npm publish發(fā)包命名將會報以下錯誤，說明名字沖突

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，發(fā)包成功

image

⑤ 上npm官網(wǎng)里搜索剛剛發(fā)布的包控嗜，如圖

image

【3】下載測試自己發(fā)布的包

① 安裝

image

② 使用

import { getUrlParams } from 'get-url-query-params'
export default {
    methods: {
        getParams() {
            // 當(dāng)前瀏覽器url為：http://localhost:8088/todayMeetingMessage.html?organizeCode=121212#/
            console.log(getUrlParams('organizeCode')) // 結(jié)果為：121212
        }
    },
}

【4】更新包

更新npm包同樣是執(zhí)行npm publish即可茧彤，同時需要修改版本號

最簡單方式無非就是改package.json文件的version字段或者可以執(zhí)行命令： npm version 1.0.1 同樣可以起到修改版本號作用

對于npm包的版本號有著一系列的規(guī)則，模塊的版本號采用X.Y.Z的格式疆栏，具體體現(xiàn)為：
1曾掂、修復(fù)bug惫谤，小改動，增加z珠洗。
2石挂、增加新特性，可向后兼容险污，增加y
3痹愚、有很大的改動，無法向下兼容,增加x

【5】刪除包

終端執(zhí)行 npm unpublish

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