总算是解决了,真的是折腾了我好久了,起码有一周的时间。
事情大概是这样的,就是好几个项目中都已经验证过且引入Moment.js
,并都可以正常的设置中文语言环境,但是在Taro
的项目中,就出现了异常,死活就是不能设置中文语言环境,多方的资料也都搜索了好几篇了,都没有找到解决方法。
其实上面说是解决方法,到不如说是我想搞懂为什么同样的代码A,B,C能运行,但是到了Taro
中就不行了,原因是什么呢?
为此才折腾了快一周时间(可见我有多菜),那么下面我们先要了解下几个预备的知识;
第一个:Webpack
中的resolve.mainfields字段,简单的理解,就是设置该字段后,可以更快的知道你所引入的包的入口点具体是哪个文件。
该值的类型是:[string]
,当Webpack
中的target
属性设置为webworke
, web
时,默认值为:['module', 'main']
,而对于Webpack
中的target
属性值为其他任意的(包括 node),默认值为:['module', 'main']
第二个:Moment.js
是一个“混合包”,关于这篇文章有个非常详细的讲述《从 moment 国际化无效聊聊 hybrid npm package》,简单的说来说,就是Moment.js
包里面存放的两份代码,一份是ES5
,一份是ES6
的,然后通过该包底下的package.jso
文件中的mai
和jsnext:main
来区分到底哪个是ES5
/ES6
。
上面的预备知识,了解后,其实就可以解决问题了,因为在Taro
的项目中默认H5
端中Webpack
配置项中的esolve.mainfields
默认值为:['main:h5', 'browser', 'module', 'jsnext:main', 'main']
而在第一个预备知识中也提到过,如果指定了esolve.mainfields
就会按这个顺序去找对应的入口文件,所以在处理Moment.js
依赖引入时,首先根据jsnext:mai
字段找到了dist/moment.js
文件并加载了,而moment/locale/zh-c
语言包,是找到了locale/zh-c
,而非dist/locale/zh-c
,这样就导致了存在了两个moment
的实例。
而我们要做的就是把esolve.mainfields
的值改成这样['main:h5', 'browser', 'module', 'main','jsnext:main']
,就可以了。
对应的就是修改Taro
项目,这个路径的;根目录/config/dev.js
的文件内容为如下;
module.exports = { env: { NODE_ENV: '"development"' }, defineConstants: {}, mini: {}, h5: { webpackChain(chain, webpack) { // webpackChain作用时机:taro处理后,webpack调用前 // 法一 // chain.resolve.mainFields.delete('jsnext:main').add('jsnext:main'); // 法二 chain.resolve.mainFields.clear(); chain.merge({ resolve: { mainFields: ['main:h5', 'browser', 'module', 'main', 'jsnext:main'] } }); return chain; } } };