本文介紹了如何在微信小程式開發中使用 npm 中包的功能，大大提高微信小程式的開發效率，同時也是微信小程式系列教程的視頻版更新，
微信小程式在發布之初沒有對 npm 的支持功能，這也是目前很多前端開發人員在熟悉了 npm 生態環境后，對微信小程式詬病的地方，
微信小程式在 2.2.1 版本后增加了對 npm 包加載的支持，使得小程式支持使用 npm 安裝第三方包，
微信小程式的功能更新最近更新的也非常給力，如之前給大家介紹的微信小程式開發平臺新功能「云開發」快速上手體驗，
1. 在小程式中加載 npm 包
微信小程式關于 npm 包的加載使用官方檔案在這里，此實戰部分我們通過加載一個 npm 的第三方庫miniprogram-datepicker
，此類別庫用于實作公歷與農歷的日期選擇功能，而微信小程式官方的組件只能簡單地選擇一個公歷時間，
在終端中定位到微信小程式的專案檔案夾，通過 npm 的安裝命令安裝，
此處請務必使用 --production 選項，可以減少安裝一些業務無關的 npm 包，從而減少整個小程式包的大小，
2. 構建 npm 包
在微信小程式開發工具的「工具」選單下點擊「構建 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 模塊的加載，
<view >
<view >今日精選</view>
<datepicker value="https://www.cnblogs.com/parry/p/{{solar}}" bindchange="bindSolarChange">
<button type="default">公歷</button>
</datepicker>
<datepicker value="https://www.cnblogs.com/parry/p/{{lunar}}" chinese="{{true}}" bindchange="bindLunarChange">
<button type="default">農歷</button>
</datepicker>
<block wx:for="{{feeds}}" wx:key="{{item.ArticleId}}">
<view data-para="{{item}}" bindtap="tapItem">
<view >
<text >{{item.CreateDateTime}} / {{item.ArticleAuthor}}</text>
</view>
<text >{{item.ArticleTitle}}</text>
<view>
<block wx:for="{{item.Tags}}" wx:key="{{item.TagName}}">
<text style="border: solid 1px {{item.BackgroundColor}};">{{item.TagName}}</text>
</block>
</view>
</view>
</block>
</view>
在頁面中布局完 datepicker 后，保存并完成專案的編譯后，點擊按鈕即可看到組件的加載情況，
4. 專案筆記以及視頻演示
此章節的配套視頻教程在 微信小程式開發視頻教程 #043 - 在小程式開發中使用 npm，
個人技術視頻博客站點：https://devopen.club/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/146952.html
標籤：JavaScript