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

Question

当您使用 webpack 时，有什么方法可以阻止 moment.js 加载所有语言环境(我只需要英语)？我正在查看源代码，似乎如果为 webpack 定义了 hasModule，那么它总是尝试 require() 每个语言环境。我很确定这需要一个拉取请求来修复。但是有什么办法可以通过 webpack 配置解决这个问题？

这是我加载 momentjs 的 webpack 配置:

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

然后在我需要它的任何地方，我只需执行 require('moment')。这可行，但它在我的包中添加了大约 250 kB 的不需要的语言文件。另外我正在使用momentjs和gulp的凉亭版本。

另外，如果 webpack 配置无法解决此问题，这里是 a link to the function where it loads the locales .我尝试将 && module.exports.loadLocales 添加到 if 语句中，但我猜 webpack 实际上并不能以这样的方式工作。无论如何，它只是 requires。我认为它现在使用正则表达式，所以我真的不知道你会如何修复它。

Answer 1

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

有two plugins这对于向 webpack 提供有关应包含在您的包中的模块的更多信息很有用:ContextReplacementPlugin 和 IgnorePlugin。

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

ContextReplacementPlugin 允许覆盖推断的信息，即提供新的正则表达式(以选择要包含的语言)。

另一种方法是使用 IgnorePlugin 忽略 require。

这是一个例子:

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