如何防止moment.js使用webpack加载语言环境？

Question

无论如何,当你使用webpack时,你可以阻止moment.js加载所有语言环境(我只需要英语)吗？我正在查看源代码,如果定义了hasModule,它是用于webpack,那么它总是尝试require()每个语言环境.我很确定这需要拉动请求来修复.但无论如何我们可以使用webpack配置修复此问题.

这是我的webpack配置加载momentjs

resolve: {
            alias: {
                moment: path.join(__dirname, "src/lib/bower/moment/moment.js")
            },
        },

然后我需要它的任何地方我只需要('时刻')这可行,但它添加了大约250kb的不需要的语言文件到我的包.此外,我正在使用bower版本的momentjs和gulp.

此外,如果这不能通过webpack配置修复,这里是一个链接到它加载语言环境的函数https://github.com/moment/moment/blob/develop/moment.js#L760-L772我尝试添加"&& module.exports.loadLocales"到if语句,但是我认为webpack并不能以某种方式工作它只需要我认为它现在使用正则表达式所以我真的不知道你会怎么做去解决它.无论如何,谢谢你的帮助.

Answer 1

代码require('./locale/' + name)可以使用目录中的每个文件locale.因此webpack将每个文件都包含在您的包中作为模块.它无法知道您使用的是哪种语言.

有两个插件可用于为webpack提供有关哪些模块应包含在您的包中的更多信息:ContextReplacementPlugin和IgnorePlugin.

require('./locale/' + name)被称为上下文(包含表达式的require).webpack从此代码片段中推断出一些信息:目录和正则表达式.在这里:directory = ".../moment/locale" regular expression = /^.*$/.因此,默认情况下,locale包含目录中的每个文件.

在ContextReplacementPlugin允许覆盖推断的信息,即提供了一个新的正则表达式(选择要包括语言).

另一种方法是忽略要求IgnorePlugin.

这是一个例子:

var webpack = require("webpack");
module.exports = {
  // ...
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};

Answer 2

在我们的项目中,我包括这样的时刻:import moment from 'moment/src/moment';这似乎可以解决问题.我们对时刻的使用非常简单,所以我不确定SDK是否会有任何不一致之处.我认为这是有效的,因为WebPack不知道如何静态地找到语言环境文件,所以你得到一个警告(通过添加一个空文件夹很容易隐藏moment/src/lib/locale/locale),但没有包含语言环境.

Answer 3

更新：2021 年
您可能还想查看许多其他库：

• https://date-fns.org
• https://github.com/iamkun/dayjs

原始答案：
似乎永远不会出现合适的模块化moment库但是，我最终使用了https://github.com/ksloan/moment-mini 之类的import * as moment from 'moment-mini';