本文介紹了如何在微信小程序開(kāi)發(fā)中使用 npm 中包的功能，大大提高微信小程序的開(kāi)發(fā)效率，同時(shí)也是微信小程序系列教程的視頻版更新。

微信小程序在發(fā)布之初沒(méi)有對(duì) npm 的支持功能，這也是目前很多前端開(kāi)發(fā)人員在熟悉了 npm 生態(tài)環(huán)境后，對(duì)微信小程序詬病的地方。

微信小程序在 2.2.1 版本后增加了對(duì) npm 包加載的支持，使得小程序支持使用 npm 安裝第三方包。

微信小程序的功能更新最近更新的也非常給力，如之前給大家介紹的 微信小程序開(kāi)發(fā)平臺(tái)新功能「云開(kāi)發(fā)」快速上手體驗(yàn) 。

在小程序中加載 npm 包

微信小程序關(guān)于 npm 包的加載使用官方文檔在 這里 ，此實(shí)戰(zhàn)部分我們通過(guò)加載一個(gè) npm 的第三方庫(kù) miniprogram-datepicker ，此類(lèi)庫(kù)用于實(shí)現(xiàn)公歷與農(nóng)歷的日期選擇功能，而微信小程序官方的組件只能簡(jiǎn)單地選擇一個(gè)公歷時(shí)間。

在終端中定位到微信小程序的項(xiàng)目文件夾，通過(guò) npm 的安裝命令安裝。

此處請(qǐng)務(wù)必使用 –production 選項(xiàng)，可以減少安裝一些業(yè)務(wù)無(wú)關(guān)的 npm 包，從而減少整個(gè)小程序包的大小。

構(gòu)建 npm 包

在微信小程序開(kāi)發(fā)工具的「工具」菜單下點(diǎn)擊「構(gòu)建 npm」命令，進(jìn)行 npm 包的構(gòu)建，此構(gòu)建可以將 npm 包構(gòu)建成在小程序中可加載使用的包。

為了幫助大家更好的理解發(fā)布 npm 包中提到的各種要求，這里簡(jiǎn)單介紹一下原理：

首先 node_modules 目錄不會(huì)參與編譯、上傳和打包中，所以小程序想要使用 npm 包必須走一遍“構(gòu)建 npm”的過(guò)程，在最外層的 node_modules 的同級(jí)目錄下會(huì)生成一個(gè) miniprogram_npm 目錄，里面會(huì)存放構(gòu)建打包后的 npm 包，也就是小程序真正使用的 npm 包。

構(gòu)建打包分為兩種：小程序 npm 包會(huì)直接拷貝構(gòu)建文件生成目錄下的所有文件到 miniprogram_npm 中；其他 npm 包則會(huì)從入口 js 文件開(kāi)始走一遍依賴分析和打包過(guò)程（類(lèi)似 webpack）。

尋找 npm 包的過(guò)程和 npm 的實(shí)現(xiàn)類(lèi)似，從依賴 npm 包的文件所在目錄開(kāi)始逐層往外找，直到找到可用的 npm 包或是小程序根目錄為止。

構(gòu)建完成后還需要確認(rèn)項(xiàng)目已勾選了「使用 npm 模塊」。

在項(xiàng)目中使用第三方模塊

在我們之前實(shí)戰(zhàn)項(xiàng)目中，在首頁(yè)中測(cè)試下此 npm 模塊的加載。

在頁(yè)面中布局完 datepicker 后，保存并完成項(xiàng)目的編譯后，點(diǎn)擊按鈕即可看到組件的加載情況。

推薦：《小程序開(kāi)發(fā)教程》