微信小程序 - npm支持踩坑

前言

最近寫了個CNode 社區的微信小程序版本，把在微信小程序中使用npm包，踩的坑記錄一下，但願能給遇到相似問題的小夥伴，提供一些思路和方向。

npm 支持

從小程序基礎庫版本 2.2.1 或以上、及開發者工具 1.02.1808300 或以上開始，小程序支持使用 npm 安裝第三方包。

踩坑之路

1. 因爲項目中須要格式化一些日期數據，因而選擇了moment，一款JavaScript 日期處理類庫

2. 首先使用命令行，安裝moment

   # 打開小程序根目錄
   cd src
   npm install --production moment

3. 而後按照小程序文檔往下操做，直到構建完成

4. 因而咱們火燒眉毛的開始使用moment

   import moment from 'moment';
   
   let sFromNowText = moment(new Date() - 360000).fromNow();
   console.log(sFromNowText);
   
   // 控制檯輸出："6 minutes ago"

5. moment可以正常工做，可是很快咱們發現英文不是咱們想要的

6. 因而咱們找到moment的國際化配置，並設置全局語言爲中文

   import moment from 'moment';
   moment.locale('zh-cn');
   
   let sFromNowText = moment(new Date() - 360000).fromNow();
   console.log(sFromNowText);
   
   // 但是控制檯，依然輸出："6 minutes ago"

7. 嘗試輸出moment.locale執行後的返回值

   // ...
   let sLang = moment.locale('zh-cn');
   console.log(sLang);
   
   // 控制檯輸出："en"

8. 發現設置語言環境失敗了，通過排查和翻閱小程序文檔後，發現經過微信開發者工具構建npm後，並不會將語言環境相關文件拷貝到miniprogram_npm目錄下，僅將入口js文件及其依賴的模塊進行打包處理，進而致使加載中文語言環境失敗。如下是摘自小程序文檔的一段話：

   構建打包分爲兩種：小程序 npm 包會直接拷貝構建文件生成目錄下的全部文件到 miniprogram_npm 中；其餘 npm 包則會從入口 js 文件開始走一遍依賴分析和打包過程（相似 webpack）。

9. 快速查看了一下moment源碼，發現moment.locale方法，會從./locale/目錄下加載語言環境包，因而嘗試手動從node_modules/moment/目錄下，將中文語言環境包，拷貝到miniprogram_npm目錄下

   // moment.js
   // ...
   function loadLocale(name) {
     // ...
     var aliasedRequire = require;
     aliasedRequire('./locale/' + name);
     // ...
   }
   // ...

10. 通過調試發現，moment定義語言環境時出錯，原來是因爲構建npm致使入口文件(moment.js)通過打包後改名爲index.js致使：Error: module "miniprogram_npm/moment/moment" is not defined

    // zh-cn.js
    (function(global, factory) {
      typeof exports === 'object' && typeof module !== 'undefined' && typeof require === 'function'
        ? factory(require('../moment'))
        : typeof define === 'function' && define.amd
          ? define(['../moment'], factory)
          : factory(global.moment);
    })(this, function(moment) {
      'use strict';
    
      var zhCn = moment.defineLocale('zh-cn', {
        // ...
      });
    
      return zhCn;
    });

11. 果真手動將'../moment'統一改成'../index'，而後從新執行

    import moment from 'moment';
    moment.locale('zh-cn');
    
    let sFromNowText = moment(new Date() - 360000).fromNow();
    console.log(sFromNowText);
    
    // 如今控制檯，輸出："6 分鐘前"

12. 大功告成，nice! 但也別忘了回過頭來，總結一下致使這幾個問題的緣由：

    1. 構建npm會將npm包的入口文件（eg: moment.js），打包後改名爲index.js
    2. 構建npm僅將npm包的入口js文件及其依賴的模塊進行打包處理，除此以外的文件（eg: moment的語言環境包）並不會作打包處理

miniprogram_npm 、 構建npm及更多npm支持相關信息，請翻閱 小程序文檔-npm支持