总算是解决了,真的是折腾了我好久了,起码有一周的时间。
事情大概是这样的,就是好几个项目中都已经验证过且引入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;
}
}
};