使用Webpack进行Angular 2翻译

发布时间：2020-12-17 17:08:21 所属栏目：安全来源：网络整理

导读：我正在尝试遵循 internationalization的Angular食谱,但我们使用的是Webpack而不是SystemJS. 在食谱中有以下片段： function getTranslationsWithSystemJs(file: string) { return System.import(file + '!text'); // relies on text plugin} 它使用SystemJS

我正在尝试遵循 internationalization的Angular食谱,但我们使用的是Webpack而不是SystemJS.
在食谱中有以下片段：

function getTranslationsWithSystemJs(file: string) {
  return System.import(file + '!text'); // relies on text plugin
}

它使用SystemJS加载转换文件.我们应该用什么呢？

解决方法

编辑

从webpack 2,您可以使用System.import(‘./ relative / path_to / messages.’locale’.xlf’),Webpack将获取该文件,并将避免扫描明显不匹配的文件.

原版的

有(据说)有几种方法可以解决这个问题,但这个方法最适合我：

在我的i18n-providers.js中：

function getTranslationFilesWithWebpack(locale: string) {
    const translationFile = `./assets/locale/messages.${locale}.xlf`;
    return require('' + translationFile)()
}

这将让webpack知道我们在运行时需要文件.接下来,我们需要让webpack知道如何处理文件.

在webpack.config.js中：

module: {
        rules: [
            /*
             * html,typescript and style rules
             */
            {
                test: /.xlf/,loader: 'promise-loader?es6-promise!raw'
            },{
                test: /.json/,loader: 'ignore-loader'
            }
        ]
    }

使用通过管道传递到promise-loader的原始加载器将告诉webpack将我的xlf文件放入一个新的块中,并通过返回一个promise,在调用require(‘filename’)时返回一个将解析为文件内容的promise. .

笔记：

>您必须告诉promise-loader使用哪个承诺库.
>因为我不告诉webpack在require(‘file’)中使用什么加载器,它会尝试扫描所有文件,并会抱怨它无法加载.json文件.这就是我必须使用ignore loader为json配置规则的原因.

我希望它有所帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!