前端多語言編譯處理解決方案, 支持Vue, React, Angular, TypeScript

🎉🎉 前端多語言編譯處理解決方案 wp-i18n-plugin

• 基於webpack4 AST分析多語言生成插件, 支持Vue, React, Angular
• 自動管理語言配置, 在編譯期後直接生成多語言拆分, 無需在客戶端從新渲染
• 項目打包後根據配置的多語言數量生成多分具備單一語言的文件. 例如使用zh-cn, en則最後輸出將會有

/dist/zh-cn
/dist/en
複製代碼

👏👏安裝

npm install webpack webpack-cli wp-i18n-plugin --save-dev
複製代碼

⚙ webpack.config.js

const WebpackI18n = require('wp-i18n-plugin'),
  path = require('path'),
  _ = require('lodash');

let webpackConfig = {
  name: '',
  mode: 'development' || 'production',
  entry: './example/example.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'output.js'
  },
  plugins: [
    // 多語言處理插件
    new WebpackI18n.Plugin({
      sourcePath: './example/lang.json',
      // 自動新增i18n對象語言列表
      languageList: ['zh-cn', 'en'],
      // 設置默認將對於key設置爲zh-cn的值
      useLanguage: 'zh-cn',
      // 是否根據內容自動生成對象
      autoWriteAble: true,
      // 格式化對象空格數
      formatSpace: 2,
      // 是否展現未翻譯的項
      showDetail: true,
      // 自動移除無用的key
      removeUnUseKeys: true
    }),
    // 後端返回code對應多語言文件拆分
    new WebpackI18n.Spliter({
      // 輸出文件路徑名稱
      outputName: './example/async-lang.json',
      // 語言包路徑
      sourcePath: './example/async-lang.json'
    })
  ]
};
複製代碼

📦webpack多編譯設置(使用node api 或者 webpack config中的一種)

• node api 啓動配置方式

webpackConfigArr = ['zh-cn', 'en'].map(language => {
  webpackConfig = _.cloneDeep(webpackConfig);
  // 配置當前編譯參數
  webpackConfig.name = language;
  // 配置輸出路徑
  webpackConfig.output.path = path.join(__dirname, 'dist') + '/' + language;
  return webpackConfig;
});
const webpack = require('webpack');
webpack(webpackConfigArr, (err, stats) => {
  err && console.log(err);
});

複製代碼

• webpack config 啓動配置方式

module.exports = ['zh-cn', 'en'].map((language) => {
  webpackConfig = _.cloneDeep(webpackConfig);
	// 配置當前編譯參數
  webpackConfig.name = language;
  // 配置輸出路徑
  webpackConfig.output.path = path.join(__dirname, 'dist') + '/' + language;
  return webpackConfig;
});
複製代碼

🌰例子

example.js

console.log('__("你好")');
複製代碼

lang.json

{
  "你好": {
    "zh-cn": "你好",
    "en": "Hello"
  }
}
複製代碼

🐭example.js編譯後輸出結果:

• dist/en/output.js

console.log('Hello');
複製代碼

• dist/zh-cn/output.js

console.log('你好');
複製代碼

🖖 關於編譯性能提高

• 建議使用在項目中加入cache-loader進行緩存以提升效率
• 建議開發時只啓動單個語言進行開發, 以下降編譯次數以達到快速編譯的效果