使用Webpack进行Angular 2翻译

2019年7月28日 195次阅读

我正在尝试遵循
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配置规则的原因.

我希望它有所帮助.

点赞