i18n-ast-auto

基于 AST 的国际化解决方案、自动提取和替换国际化词典工具

功能

• 支持 include exclude 配置按需替换
• 支持@i18n-ignore 忽略文案
• vue 自动引入 vue-i18n
• vue 自动声明 t 函数 const { t } = useI18n()
• vue 自动转化 vue 语法
• vue 支持 setup 语法糖
• js 自动引入国际化相关函数
• js 自定义调用方式
• js 自动转化 js 语法

效果

i18n scan

i18n replace

使用

1、在根目录放置配置文件

// i18n.config.js

module.exports = {
  output: {
    flat: true,
    localeOutput: 'playground/locales/lang',
    rootPath: 'playground',
    overlap: 'playground',
    writeMode: 'overwrite',
  },
  include: ['playground/test.vue'],
  logLevel: 5,
  // include: ['playground/**/*.{js,vue}'],
  // include: ['playground/**/*.{js,vue}'],
  exclude: ['playground/output'],
  transform: {
    keyMode: 'FILEPATH',
    locales: [],
    displayName: 'TEXT',
    import: [
      {
        importVar: 'useI18n ',
        importPath: 'vue-i18n',
        defaultExport: false,
        userVar: {
          script: 't',
          template: '$t',
        },
        useing: 'const { t } = useI18n()',
        effect: '.vue',
      },
      {
        importVar: 'i18n',
        importPath: '@/i18n',
        defaultExport: true,
        userVar: 'i18n.global.t',
        useing: 'const { t } = useI18n()',
        effect: '.js',
      },
    ],
  },
};

2、全局安装

pnpm add i18n-ast-auto -g

3、运行 i18n scan 扫描

i18n scan

4、去 .i18n/keyMap.json 修改 locale key

i18n scan 命令运行后会自动生成.i18n/keyMap.json 文件记录中文映射关系，你可以通过修改 displayName 改变替换后的 key

5、开始替换

i18n replace

运行 i18n replace 开始替换，该命令会基于 keyMap 替换相关文件，并转化语法，已经转换后的文件会记录在.i18n/skipFile.json 不会二次替换

支持

• 目前仅支持 vue3 与 js

常见问题

需要手动修改的场景

1、vue 语法现在不支持中文出现在 props 与 defineComponent 外中

需要注意的情况，可能不符合预期

1、嵌套复杂的三元表达式可能不符合预期

2、在 js 文件中拼接字符串中出现 html 标记，当前会自动转移 html 字符