任务
使用相同的部分为多种语言构建多个静态页面。使项目尽可能简单和最小化。
堆
带有 html-loader、HtmlWebpackPlugin 和 I18nPlugin 的 Webpack。没有什么花哨。今天的一切都是最新版本。
当前解决方案
webpack.config.js:
const entryHtmlPlugins = (language) => pageList
.map(function (entryName) {
const langPart = language === defaultLanguage ? '' : `${language}.`;
return new HtmlWebpackPlugin({
filename: `../dist/${langPart}${entryName}`,
template: `prerender/${entryName}`,
language,
});
});
module.exports = Object.keys(languages).map((language) => ({
...
module: {
rules: [{
test: /\.(html)$/,
include: path.join(__dirname, 'src/pages'),
use: {
loader: 'html-loader',
options: {
interpolate: true
}
}
},
...]
},
plugins: [
...
new I18nPlugin(languages[language]),
].concat(entryHtmlPlugins(language))
}))
索引.html
<!-- regular html with translations in format: -->
<%= __('Test') %>
问题
在模板中,导入
<%= require('html-loader!./partial.html') %>
或者
${require('!html-loader!./partial.html')}
翻译不起作用。
解决方案?
使用临时文件夹中的插件处理 HTML 页面(因此每个页面都构建一次以包含部分内容,并再次构建用于翻译)正在工作,但会导致无限重新渲染。而且感觉不对。
这个任务看起来很简单,我几乎不相信除了使用模板引擎之外别无他法。我想知道这是否是制作自定义插件的正确思路?如果当前的堆栈对于我的目的来说太谦虚了,请您提出任何其他选择。
问题
那么是否有一种或多或少优雅的方式来同时使用 partials 和 i18n 或者我必须使用 pug (或其他东西)进行模板?