在小程式中如何使用npm包

這篇文章帶給大家的內容是關於在小程式中如何使用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中文網其他相關文章！