javascript - 如何防止moment.js使用webpack加载语言环境？(How to prevent moment.js from loading locales with webpack?)

Question

Hello is there anyway you can stop moment.js from loading all the locales(I just need english) when your using webpack?(无论如何，当你使用webpack时，你可以阻止moment.js加载所有语言环境（我只需要英语）吗？)

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.(我正在查看源代码，如果定义了hasModule，它是用于webpack，那么它总是尝试require（）每个语言环境。) I'm pretty sure this needs pull request to fix.(我很确定这需要拉动请求来修复。) But is there anyway we can fix this with a webpack config.(但无论如何我们可以使用webpack配置修复此问题。) Here is my webpack config to load momentjs(这是我的webpack配置加载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.(然后我需要它的任何地方我只需要（'时刻'）这可行，但它添加了大约250kb的不需要的语言文件到我的包。) Also I'm using the bower version of momentjs and gulp.(此外，我正在使用bower版本的momentjs和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.(此外，如果这不能通过webpack配置修复，这里是一个链接到它加载语言环境的功能https://github.com/moment/moment/blob/develop/moment.js#L760-L772我尝试添加“&& module.exports.loadLocales”到if语句，但是我认为webpack并不能以某种方式工作它只需要我认为它现在使用正则表达式所以我真的不知道你会怎么做去解决它。) Anyways thanks for any help.(无论如何，谢谢你的帮助。)   ask by epelc translate from so

Answer 1

The code require('./locale/' + name) can use every file in the locale dir.(代码require('./locale/' + name)可以使用locale目录中的每个文件。)

So webpack includes every file as module in your bundle.(因此webpack将每个文件都包含在您的包中作为模块。) 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 .(有两个插件是给哪个模块应该包含在你的包的WebPack更多有用信息： ContextReplacementPlugin和IgnorePlugin 。) require('./locale/' + name) is called a context (a require which contains an expression).(require('./locale/' + name)称为上下文 （包含表达式的require）。) webpack infers some information from this code fragment: A directory and a regular expression.(webpack从此代码片段中推断出一些信息：目录和正则表达式。) Here: directory = ".../moment/locale" regular expression = /^.*$/ .(这里： directory = ".../moment/locale" regular expression = /^.*$/ 。) So by default every file in the locale directory is included.(因此，默认情况下，包含locale目录中的每个文件。) The ContextReplacementPlugin allows to override the inferred information ie provide a new regular expression (to choose the languages you want to include).(ContextReplacementPlugin允许覆盖推断的信息，即提供新的正则表达式（以选择您想要包含的语言）。) Another approach is to ignore the require with the IgnorePlugin .(另一种方法是使用IgnorePlugin忽略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$/) ] };