微信小程序使用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 相关文章推荐
javascript之卸载鼠标事件的代码
May 14 Javascript
执行iframe中的javascript方法
Oct 07 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
js创建元素(节点)示例
Jan 02 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
PHP PDO操作总结
Nov 17 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
vue自定义正在加载动画的例子
Nov 14 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 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
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
python操作redis数据库的三种方法
2020/09/10 Python
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
年度献血先进个人事迹材料
2014/02/14 职场文书
《乡愁》教学反思
2014/02/18 职场文书
学校招生宣传广告词
2014/03/19 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
先进工作者推荐材料
2014/12/23 职场文书
监察建议书
2015/02/04 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
交通安全温馨提示语
2015/07/14 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
python中filter,map,reduce的作用
2022/06/10 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript