单挑牛牛

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

3月前

之前在 静态页面多语言的实现 中基本实现了 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 文件和语言之间的对应关系

评论(3)

  • 文章不错支持一下吧

    3月前 回复
  • 非技术的路过。

    3月前 回复
  • 文章不错非常喜欢

    3月前 回复