带有 ES6 和 Webpack 的 AngularJS 语言环境

【问题标题】：AngularJS locale with ES6 and Webpack带有 ES6 和 Webpack 的 AngularJS 语言环境
【发布时间】：2017-04-12 08:51:57
【问题描述】：

我遇到了一个问题，我在做一个国际化的项目。我正在使用 AngularJS 1.5、ES6 和 Webpack，我还使用 ng-translate 处理不同的文本。

当我使用 npm 更改网站的语言时，我安装了 AngularJS-i18n 来操作数字和日期，并安装了 AngularJS-dynamic-locale 来设置 $locale 语言。

问题，我不知道如何从我的 config.js 中的 node_modules 加载 AngularJS 语言环境。我这样做了：

export default function configApp(thmDynamicLocaleProvider) {
   tmhDynamicLocaleProvider.localeLocationPattern('../../../node_modules/angular-i18n/angular-locale_{{locale}}.js');
}
configApp.$inject = ['thmDynamicLocaleProvider'];

我设置了正确的 URL，但我不知道为什么，应用程序返回 404 错误。而且我不知道如何在 webpack ot others 中加载它......

【问题讨论】：

标签： javascript angularjs webpack ecmascript-6 angular-i18n

【解决方案1】：

如果你使用 webpack 我建议你使用import() 函数。它将区域设置拆分为块，这些块将在运行时按请求调用。但是这种方法有一个限制。您无法对必要的块实施动态方式。因此，当您从客户端某处获取有关当前语言环境的信息时，您可以通过switch 运算符选择要导入的内容。

例如，

function GetLocaleInfo(locale) {
    switch(locale) {
        case 'en': 
            import('angular-i18n/angular-locale_en.js').then((en) => {
                setLocale(en);
            });
        case 'ru': 
            import('angular-i18n/angular-locale_ru.js').then((ru) => {
                setLocale(ru);
            });  
       }
}

我会多注意一点，import 函数在异步方式上使用应该只有字符串内容。它不支持动态值导致构建步骤 webpack 检查这些方法以在构建目录中构建适当的代码块。

这里是你会发现更多关于code splitting on the webpack的信息

【讨论】：