i18n-transformer

A Vite/Webpack plugin/loader that automatically transforms Chinese text in JS code into i18n translation functions based on AST.

一个基于AST自动转换JS代码中的中文为i18n翻译函数的 Vite/Webpack 插件/loader。

理论上支持任何JS框架，目前只测试了Vue2/3。

Usage

Vite

1  pnpm i -D @kapo/vite-plugin-i18n-transformer

1// vite.config.ts
2import Vue from "@vitejs/plugin-vue";
3import VueJsx from "@vitejs/plugin-vue-jsx";
4import I18nTransformer from "@kapo/vite-plugin-i18n-transformer";
5import {defineConfig} from 'vite'
6import path from 'path'
7
8export default defineConfig({

9  plugins: [
10    Vue(),
11    VueJsx(),
12    // 需要放在Vue和VueJsx插件之后
13    I18nTransformer({

14      include: ['**.js', '**.vue'],                         // 针对什么文件进行国际化

15      exclude: [                                            // 项目内不需要国际化的文件或文件夹
16        'src/locales/**',
17        'node_modules/**',
18        'src/store/modules/locale.ts'
19      ],

20      i18nCallee: 'useI18n().t',                            // 调用国际化函数

21      dependency: {                                         // 国际化函数依赖引入配置

22        name: 'useI18n',                                    // 国际化函数依赖的名称

23        path: '@/hooks/web/useI18n',                        // 引入国际化函数的路径

24        objectPattern: true,                                // 引入的国际化函数依赖的形式。true为解构形式：import { name } from 'xxx'

25        preprocessing: 'const {t} = useI18n()'              // 这行代码将添加至import依赖之后，可以用来做一些处理
26      },

27      output: {

28        filename: 'zh-CN.json',                             // 生成中文配置的文件名

29        langList: ['en-US.json'],                           // 生成其他语言配置的文件名列表

30        path: path.resolve(process.cwd(), './public/lang'), // 生成文件的路径
31      },

32      upload: {                                             // 上传翻译资源配置，如不需要上传可不传           

33        uploadUrl: 'uploadUrl',                             // 上传接口地址

34        app: 'APP_NAME',                                    // 上传参数，应用名称

35        localePath: path.join(process.cwd(), 'src/lang'),   // 本地已存在翻译资源文件夹路径

36        localeConfig: {                                     // 本地已存在翻译资源文件名

37          en: ['en.json'],

38          zh: ['zh.json'],
39        },
40      },
41    }),
42  ],
43})

Webpack

1  npm i -D @kapo/webpack-plugin-i18n-transformer

Webpack由于vue-loader版本不同，需要分版本处理。

以下是 vue-loader15.x 示例

1// vue.config.js
2const {I18nTransformerPlugin} = require('@kapo/webpack-plugin-i18n-transformer')
3module.exports = {
4  ...,
5  plugins: [
6    new I18nTransformerPlugin({
7      filename: 'zh.json',
8      langList: ['en.json'],
9      path: path.join(process.cwd(), 'public/static/locales'),
10    }, {
11      uploadUrl: 'uploadUrl',
12      app: 'APP_NAME',
13      localePath: path.join(process.cwd(), ('src/lang')),
14      localeConfig: {
15        en: ['en.json'],
16        zh: ['zh.json'],
17      },
18    }),
19  ],
20  chainWebpack: (config) => {
21    const i18nOptions = {
22      include: ['**.js', '**.jsx', '**.vue'],
23      exclude: ['src/lang/**', 'node_modules/**', 'src/main.js',],
24      i18nCallee: 'i18n.default.t',
25      dependency: {
26        name: 'i18n',
27        path: '@/lang',
28        modules: 'CommonJS',
29      },
30    }
31
32    config.module
33      .rule('js')
34      .use('i18n-loader')
35      .loader('@kapo/webpack-plugin-i18n-transformer')
36      .options(i18nOptions)
37      .before('babel-loader')
38      .end()
39      .end()
40      .rule('vueTemplateRender')
41      .test(/\.vue$/)
42      .resourceQuery(/type=template/)
43      .enforce('post')
44      .use('i18n-loader')
45      .loader('@kapo/webpack-plugin-i18n-transformer')
46      .options(i18nOptions)
47  }
48}

Special

对于项目中可能存在并不想被翻译的项，在 vite/webpack 包中提供了 ignoreAutoI18n 函数，将不想翻译的条目使用该函数包裹起来即可。

为什么不采用类似 // eslint-disabled-next-line 形式？

https://github.com/vuejs/core/issues/12114

Example

Before

After

Configuration

1interface OutputSetting {
2  /**
3   * 生成中文配置的文件名
4   */
5  filename: string;
6  /**
7   * 生成文件的路径
8   */
9  path: string;
10  /**
11   * 生成其他语言配置的文件名列表
12   */
13  langList: string[]
14}
15
16enum AppType {
17  VUE3 = 'FE_VUE3',
18  VUE2 = 'FE_VUE2',
19}
20
21interface UploadSetting {
22  /**
23   * 上传参数，应用名称
24   */
25  app: string;
26  /**
27   * 上传参数，应用类型，不传默认webpack中使用AppType.VUE2，vite中使用AppType.VUE3
28   */
29  appType: AppType;
30  /**
31   * 上传接口地址
32   */
33  uploadUrl: string;
34  /**
35   * 本地已存在翻译资源文件夹路径
36   */
37  localePath: string;
38  /**
39   * 本地已存在翻译资源文件配置，key为对应的语种，value为对应语种翻译文件名，可传多个
40   */
41  localeConfig: Record<string, string[]>;
42}
43
44interface DependencySetting {
45  /**
46   * 国际化函数依赖的名称
47   */
48  name: string
49  /**
50   * 引入国际化函数的路径
51   */
52  path: string
53  /**
54   * 引入的国际化函数依赖的形式
55   * 设置true为解构形式：import { name } from 'path'
56   */
57  objectPattern: boolean
58  /**
59   * 这行代码将添加至import依赖之后，可以用来做一些处理
60   */
61  preprocessing?: string
62}
63
64/**
65 * 收集到的国际化词条，key为通过keyRule生成的key，value为收集到的中文
66 */
67type WordMap = Record<string, string>;
68
69interface GlobalSetting {
70  /**
71   * 生产文件配置
72   */
73  output: OutputSetting;
74  /**
75   * 匹配需要翻译的正则表达式，默认/[\u4e00-\u9fa5]/
76   */
77  localePattern: RegExp;
78  /**
79   * 自定义生成key的函数，参数为收集到的中文，中文在AST中对应的Node，收集到的所有词条配置
80   * 默认规则为通过中文生成一串md5作为key，重复的中文在md5后添加 -1，-2
81   */
82  keyRule?: ((value: string, node: Node, map: WordMap) => string);
83  /**
84   * 针对哪些文件进行处理
85   */
86  include?: string[];
87  /**
88   * 排除哪些文件
89   */
90  exclude?: string[];
91  /**
92   * 调用国际化函数
93   */
94  i18nCallee: string;
95  /**
96   * 国际化依赖配置
97   */
98  dependency?: DependencySetting;
99}

Thanks

• @pekonchan