微信小程序使用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常用方法汇总
Dec 02 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 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
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
js 字符串操作函数
2009/07/25 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
对于Python深浅拷贝的理解
2019/07/29 Python
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
党员自我评价2015
2015/03/03 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android