我正在尝试遵循
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配置规则的原因.
我希望它有所帮助.