react、vue国际化插件webpack-i18n-plugin

前言

目前国际化项目一般都需要开发者逐个去实现，耗时耗力。webpack-i18n-plugin主要解决了两个痛点问题：

• 提取项目中的国际化资源文件

  在webpack中配置插件(webpack-i18n-plugin)，即可提取出中文资源

• 添加国际化代码

  添加loader，修改编译代码，自动添加国际化方法$i18n，对源码无污染

该国际化插件可用于vue，react项目，具体使用方法如下：

安装

npm install webpack-i18n-plugin -D

react项目中webpack配置

// webpack.config.js

const i18nPlugin = require("webpack-i18n-plugin");

// 配置loader
rules: [{
    test: /\.(j|t)sx?$/,
    loader: "webpack-i18n-plugin/loader",
    exclude: /node_modules/,
}],

// 配置plugins
plugins: [
    ...
    new i18nPlugin(i18nConfig),
    ...
]

vue项目中webpack配置

// vue.config.js

const i18nPlugin = require("webpack-i18n-plugin");

chainWebpack: (config) => {

    // 配置loader
    config.module.rule("i18n").test(/\.(t|j)sx?$/)
    .use("i18n-loader").loader("webpack-i18n-plugin/loader");

    // 配置plugins
    config.plugin("i18n").use(i18nPlugin).tap((options) => {
        return [...options, i18nConfig];
    });
}

插件配置项i18nConfig

const i18nConfig = {
    //国际化配置输出目录（可选）
    i18nDir: path.resolve(__dirname, "./i18n"),
    translation: {
        // 配置en_US 语言包
        en_US: {
            source: [path.resolve(__dirname, "./翻译文件.xlsx")]
        },
        ...
    }
};