微信小程序使用npm支持踩坑

2020-03-21 16:07:22

字體：大中小

來源：轉載

供稿：網友

前言

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

npm 支持

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

踩坑之路

由于項目中需要格式化一些日期數據，于是選擇了moment，一款JavaScript 日期處理類庫

首先使用命令行，安裝moment

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

然后按照小程序文檔往下操作，直到構建完成

于是我們迫不及待的開始使用moment

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

moment能夠正常工作，但是很快我們發現英文不是我們想要的

于是我們找到moment的國際化配置，并設置全局語言為中文

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

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

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

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

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

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

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

經過調試發現，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;});

果然手動將'../moment'統一改為'../index'，然后重新執行

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

大功告成，nice! 但也別忘了回過頭來，總結一下導致這幾個問題的原因：