babel可通过自定义插件在编译期静态提取用户可见的中文界面文案，如jsx文本、i18n函数参数、模板字符串静态部分等，需结合ast遍历、正则过滤与上下文判断，排除非文案内容，并协同i18n方案生成翻译资源文件。
在国际化项目中，Babel 本身不直接做字符串提取，但可通过自定义 Babel 插件在代码编译阶段静态扫描并收集中文字符串（如 JSX 文本、模板字面量、字符串字面量），再输出为翻译资源文件（如 JSON）。关键在于利用 Babel 的 AST 遍历能力，精准识别“待翻译的中文文本”并避免误提。
识别哪些中文字符串需要提取
不是所有中文都该被提取。理想目标是：仅提取用户可见的界面文案，排除变量名、注释、调试字符串、第三方库内部文本等。常见可提取位置包括：
- JSX 元素中的纯文本子节点（如
<div>提交</div>） -
t('登录')或intl.formatMessage({ id: 'login', defaultMessage: '登录' })这类 i18n 函数调用的参数 - 带中文的模板字符串（如
`欢迎${name}`中的“欢迎”）——需谨慎，建议只提静态部分 - 普通字符串字面量（如
label: '用户名'），但需结合上下文判断是否为 UI 字段
编写轻量 Babel 插件提取中文
插件核心逻辑：遍历 AST，匹配符合规则的字符串节点，过滤掉明显非文案的内容（如含 Unicode、数字、过短或过长、匹配白名单/黑名单正则），然后写入 JSON 文件。示例骨架：
module.exports = function({ types: t }) {
return {
visitor: {
StringLiteral(path) {
const value = path.node.value;
// 粗筛：长度 2–20，全中文或含中文+标点，不含字母/数字/路径/HTML 标签
if (/^[\u4e00-\u9fa5，。！？；：“”‘’（）【】《》、\s]{2,20}$/.test(value)) {
// 去重存入全局 map
extracted.add(value);
}
},
JSXText(path) {
const text = path.node.value.trim();
if (/^[\u4e00-\u9fa5，。！？；：“”‘’（）【】《》、\s]{2,20}$/.test(text)) {
extracted.add(text);
}
}
}
};
};
插件执行后，可在 babel.config.js 中注册，并配合脚本将 extracted 导出为 zh-CN.json。
与 i18n 方案协同工作
Babel 提取只是第一步。要真正落地，需衔接后续流程：
- 提取结果应作为源语言（zh-CN）基准，生成空翻译占位（如
{"login": "login"}），供其他语言填充 - 避免重复提取：给已提取的字符串加标记（如注释
// i18n-extracted），插件跳过带标记的节点 - 配合
react-intl或vue-i18n时，优先提取其标准 API 的defaultMessage，比盲目扫中文更可靠 - CI 流程中运行提取插件，对比前后 JSON 差异，自动提醒新增/删除文案
注意事项和常见坑
中文提取容易误报或漏报，需主动规避：
- 不要提取组件名、props 名、CSS 类名（如
className="btn-primary"）、路由 path（如/用户管理）——这些属于结构而非文案 - 警惕 JSX 中嵌套表达式：
<span>{loading ? '加载中' : '完成'}</span>应提取两个字符串，而非整个 JSXText - 正则不能太宽松：匹配
"123测试"或"user_name"会导致脏数据 - 构建产物里不应包含提取逻辑——插件只在开发期或 CI 中启用，生产构建禁用
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
