在小程序開(kāi)發(fā)中使用npm的方法
微信小程序在 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 包或是小程序根目錄為止。
構(gòu)建完成后還需要確認(rèn)項(xiàng)目已勾選了「使用 npm 模塊」。
3.使用npm包
js 中引入 npm 包：
const package = require('packageName')
使用 npm 包中的自定義組件：
{
"usingComponents": {
"datepicker": "miniprogram-datepicker"
}
}
miniprogram-datepicker組件運(yùn)行效果
其他
微信小程序npm支持文檔：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js中substring和substr兩者區(qū)別和使用方法
這篇文章主要介紹了js中substring和substr兩者區(qū)別和使用方法,每一個(gè)步驟都有相應(yīng)的文字介紹，感興趣的小伙伴們可以參考一下2015-11-11
本文主要介紹了JavaScript腳本延遲加載有哪些方式,主要介紹了五種方式,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-04-04
JavaScript實(shí)現(xiàn)選項(xiàng)卡功能(面向過(guò)程與面向?qū)ο?
本文主要介紹了JavaScript實(shí)現(xiàn)選項(xiàng)卡功能(面向過(guò)程與面向?qū)ο?，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
本文主要介紹了JavaScript中this的指向問(wèn)題。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
微信小程序?qū)崿F(xiàn)列表項(xiàng)左滑刪除效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表項(xiàng)左滑刪除效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
js實(shí)現(xiàn)的萬(wàn)能flv網(wǎng)頁(yè)播放器代碼
這篇文章主要介紹了js實(shí)現(xiàn)的萬(wàn)能flv網(wǎng)頁(yè)播放器代碼,以簡(jiǎn)單示例形式分析了JavaScript使用swfobject.js實(shí)現(xiàn)在線播放flv視頻的相關(guān)技巧,需要的朋友可以參考下2016-04-04
JavaScript手寫(xiě)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的快捷鍵庫(kù)
前端開(kāi)發(fā)中,有時(shí)項(xiàng)目會(huì)遇到一些快捷鍵需求,比如綁定快捷鍵,展示快捷鍵,編輯快捷鍵等需求,所以本文就來(lái)用JavaScript手寫(xiě)一個(gè)簡(jiǎn)單的快捷鍵庫(kù)吧2024-02-02
BootStrap數(shù)據(jù)表格實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家分享了BootStrap數(shù)據(jù)表格的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-09-09
js獲取指定日期前后的日期，在實(shí)際應(yīng)用中還是比較實(shí)用的，下面為大家簡(jiǎn)單介紹下具體的實(shí)現(xiàn)過(guò)程，有需要的朋友可以參考下2013-08-08
詳解Webpack實(shí)戰(zhàn)之構(gòu)建 Electron 應(yīng)用
本篇文章主要介紹了Webpack實(shí)戰(zhàn)之構(gòu)建 Electron 應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12