在Taro中引入Moment.js无法设置中文语言环境的解决方法

原创 野人  2021-11-30 23:24  阅读 41 次

总算是解决了,真的是折腾了我好久了,起码有一周的时间。

事情大概是这样的,就是好几个项目中都已经验证过且引入Moment.js,并都可以正常的设置中文语言环境,但是在Taro的项目中,就出现了异常,死活就是不能设置中文语言环境,多方的资料也都搜索了好几篇了,都没有找到解决方法。

其实上面说是解决方法,到不如说是我想搞懂为什么同样的代码A,B,C能运行,但是到了Taro中就不行了,原因是什么呢?

为此才折腾了快一周时间(可见我有多菜),那么下面我们先要了解下几个预备的知识;

第一个:Webpack中的resolve.mainfields字段,简单的理解,就是设置该字段后,可以更快的知道你所引入的包的入口点具体是哪个文件。

该值的类型是:[string],当Webpack中的target属性设置为webworker, web时,默认值为:['module', 'main'],而对于Webpack中的target属性值为其他任意的(包括 node),默认值为:['module', 'main']

第二个:Moment.js是一个“混合包”,关于这篇文章有个非常详细的讲述《从 moment 国际化无效聊聊 hybrid npm package》,简单的说来说,就是Moment.js包里面存放的两份代码,一份是ES5,一份是ES6的,然后通过该包底下的package.json文件中的mainjsnext:main 来区分到底哪个是ES5/ES6

上面的预备知识,了解后,其实就可以解决问题了,因为在Taro的项目中默认H5端中Webpack配置项中的resolve.mainfields默认值为:['main:h5', 'browser', 'module', 'jsnext:main', 'main']

而在第一个预备知识中也提到过,如果指定了resolve.mainfields就会按这个顺序去找对应的入口文件,所以在处理Moment.js依赖引入时,首先根据jsnext:main字段找到了dist/moment.js文件并加载了,而moment/locale/zh-cn语言包,是找到了locale/zh-cn,而非dist/locale/zh-cn,这样就导致了存在了两个moment的实例。

而我们要做的就是把resolve.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;
        }
    }
};
本文地址:http://www.yerenwz.com/5262.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论