如何防止moment.js从webpack加载地区?

当你使用webpack时，是否有任何方法可以停止moment.js加载所有的locale(我只需要英语)?我在看源代码，似乎如果hasModule是定义的，这是为webpack，那么它总是试图要求()每个地区。我很确定这需要一个拉请求来修复。但是我们是否可以通过webpack配置来解决这个问题呢?

下面是加载momentjs的webpack配置:

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

然后在任何我需要它的地方，我只需要('moment')。这是有效的，但它增加了大约250kb的不需要的语言文件到我的包。我还使用了momentjs和gulp的凉亭版本。

另外，如果webpack配置不能解决这个问题，这里有一个加载locale的函数的链接。我试着添加&& module.exports.loadLocales到if语句，但我猜webpack实际上并没有以那种方式工作。它只是要求无论什么。我想它现在用的是正则表达式所以我不知道你会怎么去修正它。

代码要求('。/locale/' + name)可以使用locale目录下的每个文件。所以webpack将每个文件作为模块包含在你的bundle中。它不知道你在使用哪种语言。

有两个插件非常有用，它们可以为webpack提供更多关于应该在bundle中包含哪个模块的信息:ContextReplacementPlugin和ignoplugin。

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

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

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

这里有一个例子:

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

2014-08-21 12:09:17

在我们的项目中，我包括了这样的moment: import moment from 'moment/src/moment';这似乎奏效了。我们对moment的使用非常简单，所以我不确定是否会与SDK有任何不一致。我认为这是可行的，因为WebPack不知道如何静态地找到locale文件，所以你会得到一个警告(这很容易通过在moment/src/lib/locale/locale添加一个空文件夹来隐藏)，但没有locale包含。

2016-05-11 20:22:32

根据亚当·麦克米克的回答，你已经很接近了，把你的别名改成

resolve: {
    alias: {
        moment: 'moment/src/moment'
    },
},

2016-10-20 03:06:16

使用webpack2和moment的最新版本，您可以:

import {fn as moment} from 'moment'

然后在webpack.config.js中:

resolve: {
    packageMains: ['jsnext:main', 'main']
}

2016-12-30 17:18:32

更新:2021 还有许多其他的库，你可能想签出:

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

最初的回答: 似乎合适的模块化时刻库永远不会出现然而，我刚刚结束使用https://github.com/ksloan/moment-mini像import *时刻从'moment-mini';

2017-05-02 00:36:13

下面是在NPM安装程序中使用postinstall脚本的另一个解决方案。

你可以在你的包裹上放一条线。json文件:

{
  "scripts": {
    ...
    "postinstall": "find node_modules/moment/locale -type f -not -name 'en-gb.js' -not -name 'pl.js' -printf '%p\\n' | xargs rm"
    ...
  }
}

因此，不需要的区域设置将在npm install完成安装包后立即删除。

在我的例子中，只有engb和pl locale将保留在bundle中。

如果你已经有postinstall脚本，你可以添加脚本到现有的命令:

{
  "scripts": {
    ...
    "postinstall": "previous_command && find node_modules/moment/locale -type f -not -name 'en-gb.js' -not -name 'pl.js' -printf '%p\\n' | xargs rm"
    ...
  }
}

2020-09-08 20:02:50

从2.18开始，所有的语言环境都与核心库捆绑在一起(参见GitHub问题)。

传递给IgnorePlugin的resourceRegExp参数不会根据被导入或需要的解析文件名或绝对模块名进行测试，而是根据在发生导入的源代码中传递给require或import的字符串进行测试。例如，如果你试图排除node_modules/moment/locale/*.js，这将不起作用:

new webpack.IgnorePlugin({ resourceRegExp: /moment\/locale\// });

相反，因为moment导入的代码是这样的:

require('./locale/' + name);

您的第一个regexp必须匹配该'。/地区/字符串。然后使用第二个contextRegExp参数选择发生导入的特定目录。下面的操作将导致这些区域设置文件被忽略:

plugins:[
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),
]

这意味着“任何要求语句匹配”。任何以'moment'结尾的目录中的/locale'将被忽略。

2022-09-13 17:57:24

如何防止moment.js从webpack加载地区?

推荐文章

最新文章

标签