前端国际化适配提速 90%！这款 JS 脚本 CLI 工具，自动提中文、分模块、做替换，比 AI 更稳定

npm install fe-js-utils --save-dev# 或yarn add fe-js-utils -D

{  "scripts": {    "cleanInvalidComments": "fe-js-utils cleanInvalidComments",    "checkAny": "fe-js-utils checkAny",    "extractChinese": "fe-js-utils extractChinese",    "extractCommonLocaleValues": "fe-js-utils extractCommonLocaleValues",    "findModuleInCommonLocaleValues": "fe-js-utils findModuleInCommonLocaleValues",    "autoGenerateLocaleModules": "fe-js-utils autoGenerateLocaleModules",    "autoReplaceChinese": "fe-js-utils autoReplaceChinese"  }}

// fe-js-utils.config.tsconst path = require('path');
module.exports = {  checkAny: {    targetDir: './src',    outputFile: path.join(process.cwd(), 'check-any-results.js'),    skipSet: [],    extFiles: ['.ts', '.vue']  },  cleanInvalidComments: {    targetDir: './src',    extFiles: ['.js', '.ts', '.vue']  },  extractChinese: {    targetDir: './src',    outputFile: path.join(process.cwd(), 'extract-chinese-results.js'),    extFiles: ['.js', '.ts', '.vue'],    excludeFiles: [],    excludeDirs: []  },  extractCommonLocaleValues: {    outputFile: './src/locales/zh_CN/Common.ts'  },  findModuleInCommonLocaleValues: {    localeDir: './src/locales/zh_CN',    commonLocaleModule: 'Common',    localModules: ['ObjectConstruction', 'DataDirectoryMgmt']  },  autoGenerateLocaleModules: {    outputDir: './src/locales/zh_CN',    runExtractFirst: true  },  autoReplaceChinese: {    localeDir: './src/locales/zh_CN',    commonLocaleModule: 'Common',    localModules: ['ObjectConstruction', 'DataDirectoryMgmt'],    customImportStatements: (imports: string[], filePath: string, localModule: string) => {      // 自定义 import 语句的回调，返回一个 import 语句字符串的数组，为空时不会添加任何 import 语句      return [];    },    customVariableDeclarations: (fileContent: string, filePath: string, localModule: string, needsCommon: boolean) => {      // 自定义 变量声明 的回调，返回一个变量声明字符串的数组，为空时不会添加任何变量声明      return '';    },    customReplaceTextFunction: (      filePath: string,      localModule: string,      chineseKey: string,      englishValue: string,      isInCommon: boolean,      context: string    ) => {      // 自定义 替换中文字符 的回调，返回一个替换后的字符串，为空时将不会替换任何中文字符      // 示例：      return `$t('${localModule}.${englishValue}')`;    }  }};

# 执行 any 类型检查npm run checkAny# 或yarn checkAny

// fe-js-utils.config.tsmodule.exports = {  checkAny: {    // 需要扫描的源码目录    targetDir: './src',    // 结果输出文件路径    outputFile: './check-any-results.js',    // 需要跳过的代码模式    skipSet: ['cancelCb?: (error: any) => void;', 'valueComponent?: any;'],    // 需要扫描的文件扩展名    extFiles: ['.ts', '.vue']  }};

// src/components/user/UserService.ts['value?: any;', 'fail?: (err: any) => void;'];
// src/components/alarm/AlarmService.ts['let obj: any = "";'];

# 执行注释清理npm run cleanInvalidComments# 或yarn cleanInvalidComments

// fe-js-utils.config.tsmodule.exports = {  cleanInvalidComments: {    // 需要清理注释的源码目录    targetDir: './src',    // 需要处理的文件扩展名    extFiles: ['.js', '.ts', '.vue']  }};

# 执行中文提取npm run extractChinese# 或yarn extractChinese

// fe-js-utils.config.tsmodule.exports = {  extractChinese: {    // 需要扫描的源码目录    targetDir: './src',    // 结果输出文件路径    outputFile: './extract-chinese-results.js',    // 需要扫描的文件扩展名    extFiles: ['.js', '.ts', '.vue'],    // 需要排除的目录    excludeDirs: ['node_modules', 'dist', 'build', 'locales'],    // 需要排除的特定文件    excludeFiles: ['extract-chinese-results.js'],    // 显示详细处理过程日志    verbose: false  }};

// src/components/user/UserList.vue['用户管理', '新增用户', '编辑用户'];
// src/components/alarm/AlarmList.vue['报警列表', '报警级别', '处理状态'];

# 执行公共语言包提取npm run extractCommonLocaleValues# 或yarn extractCommonLocaleValues

// fe-js-utils.config.tsmodule.exports = {  extractCommonLocaleValues: {    // 输出文件路径    outputFile: './src/locales/zh_CN/Common.ts',    // 显示详细处理过程日志    verbose: false  }};

export default {  key0: '确定',  key1: '取消',  key2: '保存',  key3: '删除'};

# 查找模块与公共模块的重复值npm run findModuleInCommonLocaleValues# 或yarn findModuleInCommonLocaleValues

// fe-js-utils.config.tsmodule.exports = {  findModuleInCommonLocaleValues: {    // 语言包目录    localeDir: './src/locales/zh_CN',    // 需要检查的模块列表    localModules: ['UserManagement', 'AlarmConfig', 'DataDirectory'],    // 公共模块名称    commonLocaleModule: 'Common',    // 是否在 localModules 中注释掉在 commonLocaleModule 中已存在的定义    annotationDefinedInCommonLocale: true,    // 显示详细处理过程日志    verbose: false  }};

============find-common-locale-values============
UserManagement 中在 Common 中出现过的值:[  "确定",  "取消",  "保存",  "删除"]
总共找到 4 个相同的值

# 先执行中文提取npm run extractChinese# 或yarn extractChinese
# 再生成国际化模块npm run autoGenerateLocaleModules# 或yarn autoGenerateLocaleModules

# 一条命令完成中文提取和模块生成npm run autoGenerateLocaleModules# 或yarn autoGenerateLocaleModules

// fe-js-utils.config.tsmodule.exports = {  extractChinese: {    targetDir: './src',    outputFile: './extract-chinese-results.js',    extFiles: ['.js', '.ts', '.vue'],    excludeDirs: ['node_modules', 'dist', 'build', 'locales']  },
  autoGenerateLocaleModules: {    // 输入文件路径（中文提取结果文件）    inputFile: './extract-chinese-results.js',    // 语言包输出目录    outputDir: './src/locales/zh_CN',    // 显示详细日志    verbose: false,    // 在生成前自动执行中文提取    runExtractFirst: true,    // 自动提取公共语言包    autoExtractCommonLocale: true,    // 对已在公共语言包中定义的中文进行注释标记    annotationDefinedInCommonLocale: true,    // 自定义模块定义规则    customModuleDefinitions: {      Notice: 'src/components/alarm-notice',      Directory: 'src/components/common-directory-view',      StructureField: 'src/components/structure-field-table'    }  }};

// src/components/user-management/UserList.vue['用户管理', '新增用户', '编辑用户'];
// src/components/alarm-config/AlarmSetting.vue['报警配置', '保存设置', '取消'];

localesDir/├── UserManagement.ts└── AlarmConfig.ts

export default {  // src/components/user-management/UserList.vue  key0: '用户管理',  key1: '新增用户',  key2: '编辑用户'};

# 自动替换项目中的中文文案npm run autoReplaceChinese# 或yarn autoReplaceChinese

// fe-js-utils.config.tsmodule.exports = {  autoReplaceChinese: {    // 语言包目录    localeDir: './src/locales/zh_CN',    // 需要处理的模块列表    localModules: ['UserManagement', 'AlarmConfig', 'DataDirectory'],    // 公共模块名称    commonLocaleModule: 'Common',    // 变量声明插入位置，默认为 // #region Hooks，如果值为空或在文件中未找到，则插入到 import 语句的最后    variableDeclarationInsertPosition: '// #region Hooks',    // 显示详细日志    verbose: false,    // 自定义 import 语句的回调函数    customImportStatements: (imports: string[], filePath: string, localModule: string) => {      // 返回一个 import 语句字符串的数组，为空时不会添加任何 import 语句      return [];    },    // 自定义变量声明的回调函数    customVariableDeclarations: (fileContent: string, filePath: string, localModule: string, needsCommon: boolean) => {      // 返回一个变量声明字符串，为空时不会添加任何变量声明      return '';    },    // 自定义替换文本的回调函数    customReplaceTextFunction: (      filePath: string,      localModule: string,      chineseKey: string,      englishValue: string,      isCommon: boolean,      context: string    ) => {      // 返回一个替换后的字符串，为空时将不会替换任何中文字符      // 示例：      return `$t('${localModule}.${englishValue}')`;    }  }};

<template>  <div>    <el-button @click="save">保存</el-button>    <el-button @click="cancel">取消</el-button>  </div></template>
<script>// #region Hooks
export default {  methods: {    save() {      this.$message.success('保存成功');    },    cancel() {      this.$emit('cancel');    }  }};</script>

<template>  <div>    <el-button @click="save">{{ localLang('save') }}</el-button>    <el-button @click="cancel">{{ localLang('cancel') }}</el-button>  </div></template>
<script>import { useLocalLang } from '@/hooks/UseLocalLang';import { LLMT } from '@/model/bo/LocalBO';
// #region Hooksconst { localLang } = useLocalLang(LLMT.UserManagement);// #endregion
export default {  methods: {    save() {      this.$message.success(localLang('saveSuccess'));    },    cancel() {      this.$emit('cancel');    }  }};</script>

# 1. 提取项目中所有中文文本npx fe-js-utils extractChinese
# 2. 自动生成模块化语言包（会自动调用extractCommonLocaleValues）npx fe-js-utils autoGenerateLocaleModules
# 3. 查看模块与公共语言包的重复项（可选）npx fe-js-utils findModuleInCommonLocaleValues
# 4. 自动替换源码中的中文npx fe-js-utils autoReplaceChinese

# 1. 提取项目中所有中文文本npx fe-js-utils extractChinese
# 2. 提取公共语言包（可选）npx fe-js-utils extractCommonLocaleValues
# 3. 生成模块化语言包npx fe-js-utils autoGenerateLocaleModules
# 4. 替换源码中的中文npx fe-js-utils autoReplaceChinese

npx fe-js-utils extractChinese

// src/components/user/UserList.vue['用户管理', '新增用户', '编辑用户'];
// src/components/alarm/AlarmList.vue['报警列表', '报警级别', '处理状态'];

npx fe-js-utils extractCommonLocaleValues

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineexport default {  key0: '确定',  key1: '取消',  key2: '保存'};

npx fe-js-utils autoGenerateLocaleModules

locales/├── Common.ts          # 公共语言包├── UserList.ts        # 用户模块语言包├── AlarmList.ts       # 报警模块语言包└── index.ts           # 导出索引文件

npx fe-js-utils findModuleInCommonLocaleValues

UserList 中在 Common 中出现过的值:[  "保存",  "取消"]

npx fe-js-utils autoReplaceChinese

<template>  <el-button @click="save">保存</el-button></template>

<template>  <el-button @click="save">{{ localLang('key0') }}</el-button></template>

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(linemodule.exports = {  extractChinese: {    targetDir: './src',    outputFile: './extract-chinese-results.js',    extFiles: ['.js', '.ts', '.vue']  },
  extractCommonLocaleValues: {    outputFile: './src/locales/zh_CN/Common.ts'  },
  autoGenerateLocaleModules: {    outputDir: './src/locales/zh_CN',    runExtractFirst: true, // 自动先执行extractChinese    autoExtractCommonLocale: true // 自动执行extractCommonLocaleValues  },
  findModuleInCommonLocaleValues: {    localeDir: './src/locales/zh_CN',    commonLocaleModule: 'Common',    localModules: ['UserList', 'AlarmList']  },
  autoReplaceChinese: {    localeDir: './src/locales/zh_CN',    commonLocaleModule: 'Common',    localModules: ['UserList', 'AlarmList']  }};