使用 Webpack 仅动态加载 angular-i18n 语言环境文件的子集答案

【问题标题】：Dynamically load only a subset of angular-i18n locale files using Webpack使用 Webpack 仅动态加载 angular-i18n 语言环境文件的子集
【发布时间】：2017-09-23 00:29:16
【问题描述】：

使用 Webpack 2.3.3 和 Babel-loader

我是使用 Webpack 的新手，我正在尝试使用 webpack 捆绑 angular-i18n 语言环境文件。我有一个配置对象，列出了应用程序支持的语言环境。例如：

var supportedLocales = {
  'FR': {
    currency: 'EUR',
    id: 'fr-fr'
  },
  'GB': {
    currency: 'GBP',
    id: 'en-gb',
  },
  'US': {
    currency: 'USD',
    id: 'en-us'
  }
}

当我安装 angular-i18n 库时，它会输出 node_modules/angular-i18n/ 目录中的所有语言环境。例如：

node_modules/
  |_ angular-i18n/
     |_ angular-locale_en-gb.js
     |_ angular-locale_en-us.js
     |_ angular-locale_fr-fr.js
     |_ ...

webpack.config.js（为发布而简化）

  module.exports = {
    context: path.join(config.appDir, '/client/assets'),
    entry: {
      main: [
        './js/index.js'
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        'SUPPORTED_LOCALES': JSON.stringify({
          supportedLocales
        })
      }),
    module: {..etc}
  };

有没有办法根据supportedLocales 动态加载这些特定的角度语言环境文件并将其包含在main.js 包中？例如：

index.js

// This doesn't work
_.each(SUPPORTED_LOCALES, function(locale) {
    require(`angular-i18n/angular-locale_${locale.id}`);
})

是否可以仅捆绑这些特定的 angular-locale 文件并将其作为新文件 locales.js 包含在应用运行时？

任何帮助将不胜感激。

【问题讨论】：

标签： angular webpack

【解决方案1】：

如果你明确地 require 每个语言环境都使用字符串文字，webpack 应该理解这一点并且只包含必要的模块：

require('angular-i18n/angular-locale_fr-fr');
require('angular-i18n/angular-locale_en-gb');
// ...

您的require-ing 风格强制 webpack 将模板字符串的所有可能匹配项包含到包中，因为它不执行您的代码。有关正在发生的事情的更详细说明，请参阅此答案：webpack dynamic module loader by require（或者直接链接到文档：https://webpack.js.org/guides/dependency-management/#require-with-expression）

【讨论】：

我想我想在一个地方定义supportedLocales（这样服务器/客户端都可以访问它）。如果我更新supportedLocales，我必须在多个地方更新它。