在小程式中如何使用npm包

不言
發布: 2018-10-17 14:31:23
轉載
5333 人瀏覽過

這篇文章帶給大家的內容是關於在小程式中如何使用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包
建置完成後也需要確認專案已勾選了「使用 npm 模組」。

在小程式中如何使用npm包

3.使用npm套件

js 中引入npm 套件:

const package = require('packageName')
登入後複製

使用npm 套件中的自訂元件:

{
    "usingComponents": {
      "datepicker": "miniprogram-datepicker"
    }
}
登入後複製

miniprogram-datepicker元件運行效果

在小程式中如何使用npm包

##其他:微信小程式npm支援文件:https://developers.weixin.qq...

#######

以上是在小程式中如何使用npm包的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!