這篇文章主要介紹了小程序中使用npm包的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

10年積累的網(wǎng)站設(shè)計、網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有魏縣免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

1. 在小程序中加載 npm 包

npm install miniprogram-datepicker --production

node_modules可以 在小程序根目錄下，也可以存在于小程序根目錄下的各個子目錄中。但是不可以 在小程序根目錄外。使用--production選項，可以減少安裝一些業(yè)務(wù)無關(guān)的 npm 包，從而減少整個小程序包的大小。

2. 構(gòu)建 npm 包

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

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

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

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

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

3.使用npm包

js 中引入 npm 包：

const package = require('packageName')

使用 npm 包中的自定義組件：

{
    "usingComponents": {
      "datepicker": "miniprogram-datepicker"
    }
}

miniprogram-datepicker組件運行效果

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享小程序中使用npm包的方法內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，詳細(xì)的解決方法等著你來學(xué)習(xí)!

分享標(biāo)題：小程序中使用npm包的方法-創(chuàng)新互聯(lián)
分享鏈接：http://www.rwnh.cn/article10/dgscgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、網(wǎng)站排名、服務(wù)器托管、定制網(wǎng)站、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)