使用 Babel 解析、修改并生成 JSX 代码时，中文、俄文等 Unicode 字符默认会被转义为 \uXXXX 形式；本文介绍通过配置 jsescOption.minimal = true 禁用自动 Unicode 转义，确保属性值（如 attrName="киррилица"）以可读原生字符输出。
使用 babel 解析、修改并生成 jsx 代码时，中文、俄文等 unicode 字符默认会被转义为 `\uxxxx` 形式；本文介绍通过配置 `jsescoption.minimal = true` 禁用自动 unicode 转义，确保属性值（如 `attrname="киррилица"`）以可读原生字符输出。
在基于 Babel 的 AST 工具链（如 codemods、JSX 属性注入、组件自动化改造）中，一个常见痛点是：当向 JSX 元素动态添加含非 ASCII 字符（如西里尔字母 киррилица、中文 按钮、日文 ボタン）的属性值时，Babel 默认生成器会将这些字符转义为 Unicode 转义序列（例如 \u043A\u0438\u0440\u0440\u0438\u043B\u0438\u0446\u0430），导致输出代码可读性差、不利于协作与调试，甚至可能干扰某些依赖原始字符串的运行时逻辑。
根本原因在于 Babel 内部使用 jsesc 库进行字符串转义，默认启用 minimal: false 模式，即对所有非 ASCII 字符执行 Unicode 转义。解决方法非常简洁——只需在 @babel/generator 的配置中显式启用 minimal: true：
const { parse } = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generate = require('@babel/generator').default;
const code = `
import React from 'react';
export const Component = () => {
return (
<button>текст</button>
);
};
`;
const ast = parse(code, {
sourceType: 'module',
plugins: ['jsx', 'typescript'],
});
traverse(ast, {
JSXOpeningElement(path) {
const newAttr = {
type: 'JSXAttribute',
name: { type: 'JSXIdentifier', name: 'attrName' },
value: { type: 'StringLiteral', value: 'киррилица' },
};
path.node.attributes.push(newAttr);
}
});
// ✅ 关键修复：启用 minimal 模式，保留原始 Unicode 字符
const output = generate(ast, {
retainLines: true,
comments: true,
jsescOption: { minimal: true }, // ← 核心配置项
}).code;
console.log(output);
// 输出中将正确显示：<button attrName="киррилица">текст</button>⚠️ 注意事项：
- jsescOption 是 @babel/generator v7.16.0+ 的正式支持选项，旧版本需升级；
- minimal: true 仅影响字符串字面量的转义行为，不影响语法结构、缩进或注释；
- 若需兼容极低版本浏览器（如 IE8），谨慎启用该选项（因部分旧引擎对裸 Unicode 字符支持不完善），但现代 React 应用通常无需考虑；
- 此配置对 TemplateLiteral（模板字符串）同样生效，适用于动态插值场景。
总结：Babel 的 Unicode 转义是默认安全策略，但在国际化开发中往往需要“所见即所得”的源码输出。通过一行 jsescOption: { minimal: true } 配置，即可优雅地保留西里尔字母、汉字、emoji 等全部 UTF-8 原始字符，显著提升生成代码的可维护性与可读性。
