微信小程序使用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三个关闭弹出层的小示例
Nov 05 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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生成静态页面详解
2006/12/05 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php通过session防url攻击方法
2014/12/10 PHP
php实现Mysql简易操作类
2015/10/11 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
vue组件实例解析
2017/01/10 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
Python heapq使用详解及实例代码
2017/01/25 Python
python selenium firefox使用详解
2019/02/26 Python
python多线程抽象编程模型详解
2019/03/20 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
几个Shell Script面试题
2014/04/18 面试题
机械专业应届生求职信
2013/12/12 职场文书
有关打架的检讨书
2014/01/25 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
司机个人年终总结
2015/03/03 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
Android中View.post和Handler.post的关系
2022/06/05 Java/Android