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

问题描述

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

Is there any way you can stop moment.js from loading all the locales (I just need English) when you're using webpack? I'm looking at the source and it seems that if hasModule is defined, which it is for webpack, then it always tries to require() every locale. I'm pretty sure this needs a pull request to fix. But is there any way we can fix this with the webpack config?

这是我用来加载 momentjs 的 webpack 配置:

Here is my webpack config to load momentjs:

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

然后在任何我需要它的地方，我只需要require('moment').这有效，但它向我的包中添加了大约 250 kB 不需要的语言文件.另外我使用的是 bower 版本的 momentjs 和 gulp.

Then anywhere I need it, I just do require('moment'). This works but it's adding about 250 kB of unneeded language files to my bundle. Also I'm using the bower version of momentjs and gulp.

此外，如果 webpack 配置无法解决此问题，请使用 指向加载语言环境的函数的链接.我尝试添加 &&module.exports.loadLocales 到 if 语句，但我猜 webpack 实际上并没有以这种方式工作.无论如何，它只是requires.我认为它现在使用正则表达式，所以我真的不知道你会如何修复它.

Also if this can't be fixed by the webpack config here is a link to the function where it loads the locales. I tried adding && module.exports.loadLocales to the if statement but I guess webpack doesn't actually work in a way where that would work. It just requires no matter what. I think it uses a regex now so I don't really know how you would even go about fixing it.

推荐答案

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

The code require('./locale/' + name) can use every file in the locale dir. So webpack includes every file as module in your bundle. It cannot know which language you are using.

有两个插件，它们有助于为 webpack 提供有关哪个模块的更多信息应该包含在您的包中:ContextReplacementPlugin 和 IgnorePlugin.

There are two plugins that are useful to give webpack more information about which module should be included in your bundle: ContextReplacementPlugin and IgnorePlugin.

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

require('./locale/' + name) is called a context (a require which contains an expression). webpack infers some information from this code fragment: A directory and a regular expression. Here: directory = ".../moment/locale" regular expression = /^.*$/. So by default every file in the locale directory is included.

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

The ContextReplacementPlugin allows to override the inferred information i.e. provide a new regular expression (to choose the languages you want to include).

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

Another approach is to ignore the require with the IgnorePlugin.

这是一个例子:

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

这篇关于如何防止 moment.js 使用 webpack 加载语言环境?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！