HTML 多语言 Webpack 插件 gettext-html-plugin

之前在 静态页面多语言的实现 中基本实现了 Webpack 打包完成之后，读取 HTML 文件进行翻译文本的替换，虽然功能上实现了，但是不能预览翻译后的 HTML，因此需要拓展 html-webpack-plugin 插件来实现预览的功能。

思路

Hook html-webpack-plugin 插件，在插件处理 HTML 之前，将对应的文本替换成翻译后的文本即可。

compiler.hooks.compilation.tap('GettextHtmlPlugin', compilation => {
  compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap('GettextHtmlPlugin', data => {
    data.html = data.html.replace(/{{*}}/, '<*>')
  })
})

gettext-html-plugin

安装

npm install gettext-html-plugin --save-dev

使用

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const GettextHtmlPlugin = require('gettext-html-plugin')

module.exports = {
  entry: {
    index: 'index.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: 'index.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: __dirname + '/index.html',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      filename: 'zh-cn.html',
      template: __dirname + '/index.html',
      chunks: ['index']
    }),
    new GettextHtmlPlugin({
      langsPath: __dirname + '/langs',
      sources: {
        'zh-cn.html': 'zh_CN'
      }
    })
  ]
}

参数

名称	类型	默认值	描述
prefix	{String}	{{	翻译文本的前标识符
suffix	{String}	}}	翻译文本的后标识符
langsPath	{String}	null	翻译文本绝对路径
injectLang	{Boolean}	true	是否修改 HTML 中 lang 属性，是否在 body 中插入语言 class
regenerateLangFile	{Boolean}	true	自动重新生成相应的语言文件
sources	{Object}	{}	目标 HTML 文件和语言之间的对应关系