如何防止使用webpack加载语言环境的moment.js？ [英] How to prevent moment.js from loading locales with webpack?

问题描述

您好，无论如何，当您使用webpack时，您可以停止加载所有语言环境（我只需要英语）的moment.js？我正在查看源代码，看起来如果hasModule被定义为适用于webpack，那么它总是试图require（）每个语言环境。我很确定这需要拉取请求来解决。但是，无论如何，我们可以通过webpack配置来解决这个问题。

这是我的webpack配置，用于加载时间片

 resolve：{
别名：{
 moment：path.join（__ dirname，src / lib / bower / moment / moment.js）
 }，
}，
  

然后我需要的任何地方我只需要（'时刻' ）这个工程，但它增加了约250KB的不需要的语言文件到我的包。另外，如果使用webpack配置不能解决这个问题，那么这里就是一个链接到它载入函数的地方语言环境 https://github.com/moment/moment/blob/develop/moment。 js＃L760-L772 我尝试在if语句中添加&& module.exports.loadLocales，但我猜测webpack并不会以一种可以工作的方式工作，而只需要不管我怎么想现在使用正则表达式，所以我真的不知道你会怎么去解决它。无论如何感谢您的帮助。

解决方案

代码 require（'./ locale /'+ name） 可以使用 locale dir中的每个文件。因此，webpack将每个文件都包含在您的包中。它无法知道您使用的是哪种语言。

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

require（'./ locale /'+ name） 上下文（包含表达式的要求）。 webpack从这段代码中推断出一些信息：一个目录和一个正则表达式。这里： directory =... / moment / locale 正则表达式= /^.*$/。因此，默认情况下， locale 目录中的每个文件都包含在内。
$ b ContextReplacementPlugin code>允许覆盖推断的信息，即提供一个新的正则表达式（选择你想包含的语言）。另一种方法是忽略require与 IgnorePlugin 。

下面是一个例子：

  var webpack = require（webpack）; 
 module.exports = {
 // ... 
 plugins：[
 new webpack.ContextReplacementPlugin（/ moment [\ / \\] locale $ /，/ de | fr | hu /）
 // new webpack.IgnorePlugin（/ ^ \.\ / locale $ /，/ moment $ /）
] 
}; 
  

Hello is there anyway you can stop moment.js from loading all the locales(I just need english) when your using webpack? I'm looking at the source 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 pull request to fix. But is there anyway we can fix this with a webpack config.

Here is my webpack config to load momentjs

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

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

Also if this can't be fixed by a webpack config here is a link to the function where it loads the locales https://github.com/moment/moment/blob/develop/moment.js#L760-L772 I tried adding "&& module.exports.loadLocales" to the if statement but I guesse webpack doesnt acaully 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. Anyways thanks for any help.

解决方案

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.

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) 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.

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

Another approach is to ignore the require with the IgnorePlugin.

Here is an example:

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

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