本文介紹瞭如何在微信小程式開發中使用 npm 中包的功能，大大提高微信小程式的開發效率，同時也是微信小程式系列教程的視訊版更新。

微信小程式在釋出之初沒有對 npm 的支援功能，這也是目前很多前端開發人員在熟悉了 npm 生態環境後，對微信小程式詬病的地方。

微信小程式在 2.2.1 版本後增加了對 npm 包載入的支援，使得小程式支援使用 npm 安裝第三方包。

微信小程式的功能更新最近更新的也非常給力，如之前給大家介紹的 微信小程式開發平臺新功能「雲開發」快速上手體驗。

1. 在小程式中載入 npm 包

微信小程式關於 npm 包的載入使用官方文件在這裡，此實戰部分我們通過載入一個 npm 的第三方庫

在終端中定位到微信小程式的專案資料夾，通過 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 class="doc-container">
  <view class="doc-title">今日精選</view>

  <datepicker value="{{solar}}" bindchange="bindSolarChange">
    <button type="default">公曆</button>
  </datepicker>
  <datepicker value="{{lunar}}" chinese="{{true}}" bindchange="bindLunarChange">
    <button type="default">農曆</button>
  </datepicker>

  <block wx:for="{{feeds}}" wx:key="{{item.ArticleId}}">
    <view class="list" data-para="{{item}}" bindtap="tapItem">
      <view class="view_preinfo">
        <text class="list_preinfo">{{item.CreateDateTime}} / {{item.ArticleAuthor}}</text>
      </view>
      <text class="list_title">{{item.ArticleTitle}}</text>
      <view>
        <block wx:for="{{item.Tags}}" wx:key="{{item.TagName}}">
          <text class="list_tag" style="border: solid 1px {{item.BackgroundColor}};">{{item.TagName}}</text>
        </block>
      </view>
    </view>
  </block>
</view>
 

在頁面中佈局完 datepicker 後，儲存並完成專案的編譯後，點選按鈕即可看到元件的載入情況。

4. 專案筆記以及視訊演示