溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

在小程序開(kāi)發(fā)中使用npm的方法

發(fā)布時(shí)間：2020-09-06 15:47:58 來(lái)源：腳本之家 閱讀：478 作者：guyoung 欄目：web開(kāi)發(fā)

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

1. 在小程序中加載 npm 包

npm install miniprogram-datepicker --production

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

2. 構(gòu)建 npm 包

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

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ò)程（類似 webpack）。

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

在小程序開(kāi)發(fā)中使用npm的方法

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

在小程序開(kāi)發(fā)中使用npm的方法

3.使用npm包

js 中引入 npm 包：

const package = require('packageName')

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

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

miniprogram-datepicker組件運(yùn)行效果

在小程序開(kāi)發(fā)中使用npm的方法

其他

微信小程序npm支持文檔：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手