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


Posted in Javascript onNovember 07, 2018

前言

最近写了个CNode 社区的微信小程序版本,把在微信小程序中使用npm包,踩的坑记录一下,希望能给遇到类似问题的小伙伴,提供一些思路和方向。

npm 支持

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。

踩坑之路

由于项目中需要格式化一些日期数据,于是选择了moment,一款JavaScript 日期处理类库

首先使用命令行,安装moment

# 打开小程序根目录
cd src
npm 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! 但也别忘了回过头来,总结一下导致这几个问题的原因:

  • 构建npm会将npm包的入口文件(eg: moment.js),打包后更名为index.js
  • 构建npm仅将npm包的入口js文件及其依赖的模块进行打包处理,并不会将该npm包下一些可选的文件(eg: moment的语言环境包)拷贝到miniprogram_npm目录下

miniprogram_npm 、构建npm及更多npm支持相关信息,请翻阅小程序文档-npm支持

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
豆瓣网的jquery代码实例
Jun 15 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 Javascript
Angular Material Icon使用详解
Nov 07 #Javascript
详解Webpack loader 之 file-loader
Nov 07 #Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 #Javascript
javascript动态创建对象的属性详解
Nov 07 #Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 #Javascript
详解在vue-test-utils中mock全局对象
Nov 07 #Javascript
vue-cli 首屏加载优化问题
Nov 06 #Javascript
You might like
php中取得文件的后缀名?
2012/02/20 PHP
php中使用sftp教程
2015/03/30 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
jQuery 位置插件
2008/12/25 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
JavaScript中的this机制
2016/01/30 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
python中字符串前面加r的作用
2015/06/04 Python
Python中几个比较常见的名词解释
2015/07/04 Python
python PyTorch预训练示例
2018/02/11 Python
python爬取微信公众号文章
2018/08/31 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
庆元旦广播稿
2014/02/10 职场文书
工作分析计划书
2014/04/30 职场文书
三八节标语
2014/06/27 职场文书
不同意离婚上诉状
2015/05/23 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL