微信小程序怎么支持npm

本篇內(nèi)容介紹了“微信小程序怎么支持npm”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、丹棱ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的丹棱網(wǎng)站制作公司

npm 支持

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

踩坑之路

由于項(xiàng)目中需要格式化一些日期數(shù)據(jù)，于是選擇了moment，一款JavaScript 日期處理類庫(kù)

首先使用命令行，安裝moment

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

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

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

import moment from 'moment';

let sFromNowText = moment(new Date() - 360000).fromNow();
console.log(sFromNowText);

// 控制臺(tái)輸出："6 minutes ago"

moment能夠正常工作，但是很快我們發(fā)現(xiàn)英文不是我們想要的

于是我們找到moment的國(guó)際化配置，并設(shè)置全局語言為中文

import moment from 'moment';
moment.locale('zh-cn');

let sFromNowText = moment(new Date() - 360000).fromNow();
console.log(sFromNowText);

// 可是控制臺(tái)，依然輸出："6 minutes ago"

嘗試輸出moment.locale執(zhí)行后的返回值

// ...
let sLang = moment.locale('zh-cn');
console.log(sLang);

// 控制臺(tái)輸出："en"

發(fā)現(xiàn)設(shè)置語言環(huán)境失敗了，經(jīng)過排查和翻閱小程序文檔后，發(fā)現(xiàn)通過微信開發(fā)者工具構(gòu)建npm后，并不會(huì)將語言環(huán)境相關(guān)文件拷貝到miniprogram_npm目錄下，僅將入口js文件及其依賴的模塊進(jìn)行打包處理，進(jìn)而導(dǎo)致加載中文語言環(huán)境失敗。以下是摘自小程序文檔的一段話：

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

快速查看了一下moment源碼，發(fā)現(xiàn)moment.locale方法，會(huì)從./locale/目錄下加載語言環(huán)境包，于是嘗試手動(dòng)從node_modules/moment/目錄下，將中文語言環(huán)境包，拷貝到miniprogram_npm目錄下

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

經(jīng)過調(diào)試發(fā)現(xiàn)，moment定義語言環(huán)境時(shí)出錯(cuò)，原來是由于構(gòu)建npm導(dǎo)致入口文件(moment.js)經(jīng)過打包后更名為index.js導(dǎo)致：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;
});

果然手動(dòng)將'../moment'統(tǒng)一改為'../index'，然后重新執(zhí)行

import moment from 'moment';
moment.locale('zh-cn');

let sFromNowText = moment(new Date() - 360000).fromNow();
console.log(sFromNowText);

// 現(xiàn)在控制臺(tái)，輸出："6 分鐘前"

大功告成，nice! 但也別忘了回過頭來，總結(jié)一下導(dǎo)致這幾個(gè)問題的原因：

構(gòu)建npm會(huì)將npm包的入口文件（eg: moment.js），打包后更名為index.js
構(gòu)建npm僅將npm包的入口js文件及其依賴的模塊進(jìn)行打包處理，并不會(huì)將該npm包下一些可選的文件（eg: moment的語言環(huán)境包）拷貝到miniprogram_npm目錄下

miniprogram_npm 、構(gòu)建npm及更多npm支持相關(guān)信息，請(qǐng)翻閱小程序文檔-npm支持

“微信小程序怎么支持npm”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

文章標(biāo)題：微信小程序怎么支持npm
轉(zhuǎn)載來源：http://muchs.cn/article26/phoijg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、企業(yè)建站、域名注冊(cè)、網(wǎng)頁設(shè)計(jì)公司、小程序開發(fā)、

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容