這篇文章帶給大家的內容是關於在小程式中如何使用npm包,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
微信小程式在 2.2.1 版本後增加了對 npm 套件載入的支持,使得小程式支援使用 npm 安裝第三方套件。
1. 在小程式中載入npm 套件
npm install miniprogram-datepicker --production
node_modules可以在小程式根目錄下,也可以存在於小程式根目錄下的各個子目錄中。但不可以 在小程式根目錄外。使用--production選項,可以減少安裝一些業務無關的 npm 包,從而減少整個小程式包的大小。
2. 構建npm 套件
在微信小程式開發工具的「工具」選單下點擊「構建npm」命令,進行npm 套件的構建,此構建可以將npm 套件建構成在小程式中可載入使用的套件。
node_modules 目錄不會參與編譯、上傳和打包中,所以小程式想要使用npm 套件必須走一遍「建置npm」的過程,在最外層的node_modules 的同級目錄下會產生一個miniprogram_npm 目錄,裡面會存放建置打包後的npm 包,也就是小程式真正使用的npm 套件。
建置打包分為兩種:小程式npm 套件會直接拷貝建置檔案產生目錄下的所有檔案到miniprogram_npm 中;其他npm 套件會從入口js 檔案開始走一遍依賴分析和打包流程(類似webpack)。
尋找 npm 套件的過程和 npm 的實作類似,從依賴 npm 套件的檔案所在目錄開始逐層往外找,直到找到可用的 npm 套件或是小程式根目錄為止。
建置完成後也需要確認專案已勾選了「使用 npm 模組」。
3.使用npm套件
js 中引入npm 套件:
const package = require('packageName')
使用npm 套件中的自訂元件:
{ "usingComponents": { "datepicker": "miniprogram-datepicker" } }
miniprogram-datepicker元件運行效果
##其他:微信小程式npm支援文件:https://developers.weixin.qq...
#######以上是在小程式中如何使用npm包的詳細內容。更多資訊請關注PHP中文網其他相關文章!