Babel 插件 babel/plugin-transform-json-strings 详解转义 JS 字符串中的 U2028 与 U2029 分隔符【免费下载链接】babel Babel is a compiler for writing next generation JavaScript.项目地址: https://gitcode.com/gh_mirrors/ba/babel导读babel/plugin-transform-json-strings是 Babel 官方插件包之一核心职责是将 JavaScript 字符串字面量与指令字面量中出现的U2028 LINE SEPARATOR行分隔符与U2029 PARAGRAPH SEPARATOR段落分隔符转义为等价的\u2028/\u2029转义序列。本文以该插件的 README 为骨架结合 插件源码 与仓库内的测试用例完整讲解其安装、配置、实现原理、奇偶反斜杠等边界场景以及它与babel/preset-env的协作关系。读完本文你将能够独立安装并在工程中正确配置该插件并理解其只重写原始文本、不动 AST 语义的设计思路。为什么需要转义 U2028 / U2029在 ECMAScript 2019 之前JavaScript 规范ES5/ES2015 等沿用了 JSON 的字符串定义规定字符串字面量中不允许出现未经转义的 U2028行分隔符和 U2029段落分隔符。一旦源码中出现这两个字符旧版 JavaScript 引擎会直接抛出语法错误SyntaxError例如把包含这两个字符的字符串粘贴进源码、或由某些工具生成的代码中时会意外编译失败。这一约束与 JSON 完全一致——JSON 规范本身也禁止在字符串中出现未转义的这两个字符因此当时人们常说JavaScript 是 JSON 的超集并不完全成立JSON 中允许它们而 JS 不允许。ECMAScript 2019 引入 JSON superset 提案正式允许在 JavaScript 字符串字面量中直接书写 U2028 / U2029使 JS 真正成为 JSON 的超集。babel/plugin-transform-json-strings正是用于把这种新语法降级转译让包含这两个字符的源码在老引擎上也能正常运行。插件在 package.json 中的官方描述精炼概括了其功能Escape U2028 LINE SEPARATOR and U2029 PARAGRAPH SEPARATOR in JS strings安装按照 README 的说明使用 npm 以开发依赖方式安装npm install --save-dev babel/plugin-transform-json-strings或使用 yarnyarn add babel/plugin-transform-json-strings --dev安装为devDependencies是因为插件仅在构建/转译阶段发挥作用不会进入运行时依赖。从仓库的 package.json 可以看到该插件运行时只依赖babel/helper-plugin-utils并以babel/core^8.0.0作为 peerDependency因此请确保项目中已安装兼容版本的babel/core。配置与使用在 Babel 配置中启用插件安装完成后在 Babel 配置文件如babel.config.json中启用{ plugins: [babel/plugin-transform-json-strings] }插件本身不接收任何参数直接以字符串形式列出即可。它既可以作为独立插件使用也可以作为babel/preset-env的底层转换组件被间接启用详见下文与 preset-env 的协作。命令行使用使用babel/cli时可通过--plugins参数显式指定babel input.js --plugins babel/plugin-transform-json-strings --out-file output.js转换效果一览以下面这段包含原始 U2028 字符的代码为例测试用例取自 directive-line-separator 输入before after; // between before and after 之间是一个 U2028 LINE SEPARATOR ; // 单独一个 U2028 LINE SEPARATOR \ ; // 已被反斜杠转义的 U2028 LINE SEPARATOR \u2028; // 已是转义序列的 U2028 LINE SEPARATOR经插件转换后对应 output.jsbefore\u2028after; \u2028; \ ; // 保持原样已被转义的字符不再重复转义 \u2028; // 保持原样可以看到裸的 U2028 被改写为\u2028而已经带反斜杠或已是转义序列的形式保持不动。这正是插件最核心的语义保证——绝不改变字符串在运行时的实际值。实现原理源码级剖析插件完整的转换逻辑位于 src/index.ts全篇不足 30 行实现非常精巧值得逐行拆解。1. 正则匹配考虑反斜杠前缀const regex /(\\*)([\u2028\u2029])/g;该全局正则捕获两类内容(\\*)捕获 U2028/U2029 之前连续的零个或多个反斜杠[\u2028\u2029]匹配目标字符本身。之所以要捕获前缀反斜杠是为了判断该分隔符是否已被转义——这引出了下面的奇偶判断。2. 奇数反斜杠判断区分已转义与未转义function replace(match: string, escapes: string, separator: string) { // If theres an odd number, that means the separator itself was escaped. // \X escapes X. // \\X escapes the backslash, so X is unescaped. const isEscaped escapes.length % 2 1; if (isEscaped) return match; return ${escapes}\\u${separator.charCodeAt(0).toString(16)}; }这是整个插件最关键的正确性设计其规则为奇数个反斜杠如\ 反斜杠直接作用于分隔符分隔符本身已被转义属于合法的新语法文本原样返回偶数个反斜杠如\\ 、\\\\ 反斜杠两两配对转义的是反斜杠本身紧随其后的 U2028/U2029 实际是未被转义的裸字符需要被改写为\uXXXX同时保留原有的偶数个反斜杠。改写后的转义序列通过separator.charCodeAt(0).toString(16)计算U2028 →\u2028U2029 →\u2029。3. 只改写原始文本extra.rawvisitor: api.traverse.explode({ DirectiveLiteral|StringLiteral({ node }) { const { extra } node; if (!extra?.raw) return; extra.raw (extra.raw as string).replace(regex, replace); }, }),插件同时监听DirectiveLiteral指令字面量如use strict及其它字符串指令和StringLiteral普通字符串字面量两种节点。它只修改节点上的extra.raw字段——即源码中的原始字符串文本而不触碰node.value运行时语义值。这是理解本插件设计的关键extra.raw是 Babel 解析器保留的源码原文含引号与转义形式改写它只影响代码生成阶段的输出形式node.value保持不变因此转译前后代码的运行时行为完全一致before\u2028after与before after求值结果完全相同。这种文本层转换策略保证了插件对 AST 的侵入性最小即使后续还有其他插件继续处理该节点也不会因字符串值的变动而产生意外。边界场景测试用例全解读仓库在 test/fixtures/json-strings 下组织了 4 组 fixture覆盖 U2028 与 U2029 ×字符串字面量与指令字面量的组合每组均包含input.js转译前、output.js期望转译结果与exec.js运行时断言。测试通过 test/index.js 调用babel/helper-plugin-test-runner执行fixture 目录的 options.json 统一声明plugins: [transform-json-strings]。以 string-line-separator 的 exec.js 为例它精确刻画了反斜杠奇偶的每种情况expect(\u2028.length).toBe(1); // 已是转义序列不动 expect(before after.length).toBe(12); // 裸 U2028转义为 \u2028运行值不变 expect( .length).toBe(1); // 单独裸 U2028转义 expect(\ .length).toBe(0); // 1 个反斜杠奇数已转义原样保留 expect(\\ .length).toBe(2); // 2 个反斜杠偶数\u2028 前补一个反斜杠 expect(\\\ .length).toBe(1); // 3 个反斜杠奇数已转义原样保留 expect(\\\\ .length).toBe(3); // 4 个反斜杠偶数\u2028 前补三个反斜杠奇数反斜杠1、3 个时输出保持\等原始形式运行值为空字符串或单反斜杠偶数反斜杠2、4 个时输出变为\\\u2028、\\\\\u2028运行值保持为\ U2028、\\ U2028。string-paragraph-separator 对 U2029 验证了完全相同的矩阵而 directive-line-separator 与 directive-paragraph-separator 则证明指令字面量如use strict场景下的裸分隔符同样会被正确处理。本地运行测试在仓库根目录安装依赖后可单独运行该插件的测试yarn jest packages/babel-plugin-transform-json-strings与 babel/preset-env 的协作该插件属于 preset-env 内置的转换能力之一。在 preset-env 的 available-plugins.ts 中注册为transform-json-strings并在其 package.json 中声明为工作区依赖。实际测试基线表明见 preset-env 的 bugfixes 测试输出 中transform-json-strings { chrome 66 }一行当目标浏览器为 Chrome 66 以下等不支持 JSON superset 语法的旧环境时preset-env 会自动启用该插件进行降级转译目标环境全部支持时则自动跳过避免多余输出。这意味着日常项目通常无需手动安装此插件配置好babel/preset-env与browserslist目标即可获得按需转译。小结babel/plugin-transform-json-strings是一个小而精的官方插件它用一条正则加一个奇偶判断就稳妥地解决了 U2028/U2029 在旧引擎上的兼容问题通过只改写extra.raw原始文本、不改变 AST 语义值的设计保证转译前后运行时行为零差异。无论是手动配置plugins: [babel/plugin-transform-json-strings]还是借助babel/preset-env按目标环境自动启用它都是处理 ECMAScript 2019 JSON superset 语法降级时的标准答案。理解它的实现细节也能帮助你举一反三地掌握 Babel 插件中文本层转换这一通用模式。【免费下载链接】babel Babel is a compiler for writing next generation JavaScript.项目地址: https://gitcode.com/gh_mirrors/ba/babel创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Babel 插件 @babel/plugin-transform-json-strings 详解：转义 JS 字符串中的 U+2028 与 U+2029 分隔符
Babel 插件 babel/plugin-transform-json-strings 详解转义 JS 字符串中的 U2028 与 U2029 分隔符【免费下载链接】babel Babel is a compiler for writing next generation JavaScript.项目地址: https://gitcode.com/gh_mirrors/ba/babel导读babel/plugin-transform-json-strings是 Babel 官方插件包之一核心职责是将 JavaScript 字符串字面量与指令字面量中出现的U2028 LINE SEPARATOR行分隔符与U2029 PARAGRAPH SEPARATOR段落分隔符转义为等价的\u2028/\u2029转义序列。本文以该插件的 README 为骨架结合 插件源码 与仓库内的测试用例完整讲解其安装、配置、实现原理、奇偶反斜杠等边界场景以及它与babel/preset-env的协作关系。读完本文你将能够独立安装并在工程中正确配置该插件并理解其只重写原始文本、不动 AST 语义的设计思路。为什么需要转义 U2028 / U2029在 ECMAScript 2019 之前JavaScript 规范ES5/ES2015 等沿用了 JSON 的字符串定义规定字符串字面量中不允许出现未经转义的 U2028行分隔符和 U2029段落分隔符。一旦源码中出现这两个字符旧版 JavaScript 引擎会直接抛出语法错误SyntaxError例如把包含这两个字符的字符串粘贴进源码、或由某些工具生成的代码中时会意外编译失败。这一约束与 JSON 完全一致——JSON 规范本身也禁止在字符串中出现未转义的这两个字符因此当时人们常说JavaScript 是 JSON 的超集并不完全成立JSON 中允许它们而 JS 不允许。ECMAScript 2019 引入 JSON superset 提案正式允许在 JavaScript 字符串字面量中直接书写 U2028 / U2029使 JS 真正成为 JSON 的超集。babel/plugin-transform-json-strings正是用于把这种新语法降级转译让包含这两个字符的源码在老引擎上也能正常运行。插件在 package.json 中的官方描述精炼概括了其功能Escape U2028 LINE SEPARATOR and U2029 PARAGRAPH SEPARATOR in JS strings安装按照 README 的说明使用 npm 以开发依赖方式安装npm install --save-dev babel/plugin-transform-json-strings或使用 yarnyarn add babel/plugin-transform-json-strings --dev安装为devDependencies是因为插件仅在构建/转译阶段发挥作用不会进入运行时依赖。从仓库的 package.json 可以看到该插件运行时只依赖babel/helper-plugin-utils并以babel/core^8.0.0作为 peerDependency因此请确保项目中已安装兼容版本的babel/core。配置与使用在 Babel 配置中启用插件安装完成后在 Babel 配置文件如babel.config.json中启用{ plugins: [babel/plugin-transform-json-strings] }插件本身不接收任何参数直接以字符串形式列出即可。它既可以作为独立插件使用也可以作为babel/preset-env的底层转换组件被间接启用详见下文与 preset-env 的协作。命令行使用使用babel/cli时可通过--plugins参数显式指定babel input.js --plugins babel/plugin-transform-json-strings --out-file output.js转换效果一览以下面这段包含原始 U2028 字符的代码为例测试用例取自 directive-line-separator 输入before after; // between before and after 之间是一个 U2028 LINE SEPARATOR ; // 单独一个 U2028 LINE SEPARATOR \ ; // 已被反斜杠转义的 U2028 LINE SEPARATOR \u2028; // 已是转义序列的 U2028 LINE SEPARATOR经插件转换后对应 output.jsbefore\u2028after; \u2028; \ ; // 保持原样已被转义的字符不再重复转义 \u2028; // 保持原样可以看到裸的 U2028 被改写为\u2028而已经带反斜杠或已是转义序列的形式保持不动。这正是插件最核心的语义保证——绝不改变字符串在运行时的实际值。实现原理源码级剖析插件完整的转换逻辑位于 src/index.ts全篇不足 30 行实现非常精巧值得逐行拆解。1. 正则匹配考虑反斜杠前缀const regex /(\\*)([\u2028\u2029])/g;该全局正则捕获两类内容(\\*)捕获 U2028/U2029 之前连续的零个或多个反斜杠[\u2028\u2029]匹配目标字符本身。之所以要捕获前缀反斜杠是为了判断该分隔符是否已被转义——这引出了下面的奇偶判断。2. 奇数反斜杠判断区分已转义与未转义function replace(match: string, escapes: string, separator: string) { // If theres an odd number, that means the separator itself was escaped. // \X escapes X. // \\X escapes the backslash, so X is unescaped. const isEscaped escapes.length % 2 1; if (isEscaped) return match; return ${escapes}\\u${separator.charCodeAt(0).toString(16)}; }这是整个插件最关键的正确性设计其规则为奇数个反斜杠如\ 反斜杠直接作用于分隔符分隔符本身已被转义属于合法的新语法文本原样返回偶数个反斜杠如\\ 、\\\\ 反斜杠两两配对转义的是反斜杠本身紧随其后的 U2028/U2029 实际是未被转义的裸字符需要被改写为\uXXXX同时保留原有的偶数个反斜杠。改写后的转义序列通过separator.charCodeAt(0).toString(16)计算U2028 →\u2028U2029 →\u2029。3. 只改写原始文本extra.rawvisitor: api.traverse.explode({ DirectiveLiteral|StringLiteral({ node }) { const { extra } node; if (!extra?.raw) return; extra.raw (extra.raw as string).replace(regex, replace); }, }),插件同时监听DirectiveLiteral指令字面量如use strict及其它字符串指令和StringLiteral普通字符串字面量两种节点。它只修改节点上的extra.raw字段——即源码中的原始字符串文本而不触碰node.value运行时语义值。这是理解本插件设计的关键extra.raw是 Babel 解析器保留的源码原文含引号与转义形式改写它只影响代码生成阶段的输出形式node.value保持不变因此转译前后代码的运行时行为完全一致before\u2028after与before after求值结果完全相同。这种文本层转换策略保证了插件对 AST 的侵入性最小即使后续还有其他插件继续处理该节点也不会因字符串值的变动而产生意外。边界场景测试用例全解读仓库在 test/fixtures/json-strings 下组织了 4 组 fixture覆盖 U2028 与 U2029 ×字符串字面量与指令字面量的组合每组均包含input.js转译前、output.js期望转译结果与exec.js运行时断言。测试通过 test/index.js 调用babel/helper-plugin-test-runner执行fixture 目录的 options.json 统一声明plugins: [transform-json-strings]。以 string-line-separator 的 exec.js 为例它精确刻画了反斜杠奇偶的每种情况expect(\u2028.length).toBe(1); // 已是转义序列不动 expect(before after.length).toBe(12); // 裸 U2028转义为 \u2028运行值不变 expect( .length).toBe(1); // 单独裸 U2028转义 expect(\ .length).toBe(0); // 1 个反斜杠奇数已转义原样保留 expect(\\ .length).toBe(2); // 2 个反斜杠偶数\u2028 前补一个反斜杠 expect(\\\ .length).toBe(1); // 3 个反斜杠奇数已转义原样保留 expect(\\\\ .length).toBe(3); // 4 个反斜杠偶数\u2028 前补三个反斜杠奇数反斜杠1、3 个时输出保持\等原始形式运行值为空字符串或单反斜杠偶数反斜杠2、4 个时输出变为\\\u2028、\\\\\u2028运行值保持为\ U2028、\\ U2028。string-paragraph-separator 对 U2029 验证了完全相同的矩阵而 directive-line-separator 与 directive-paragraph-separator 则证明指令字面量如use strict场景下的裸分隔符同样会被正确处理。本地运行测试在仓库根目录安装依赖后可单独运行该插件的测试yarn jest packages/babel-plugin-transform-json-strings与 babel/preset-env 的协作该插件属于 preset-env 内置的转换能力之一。在 preset-env 的 available-plugins.ts 中注册为transform-json-strings并在其 package.json 中声明为工作区依赖。实际测试基线表明见 preset-env 的 bugfixes 测试输出 中transform-json-strings { chrome 66 }一行当目标浏览器为 Chrome 66 以下等不支持 JSON superset 语法的旧环境时preset-env 会自动启用该插件进行降级转译目标环境全部支持时则自动跳过避免多余输出。这意味着日常项目通常无需手动安装此插件配置好babel/preset-env与browserslist目标即可获得按需转译。小结babel/plugin-transform-json-strings是一个小而精的官方插件它用一条正则加一个奇偶判断就稳妥地解决了 U2028/U2029 在旧引擎上的兼容问题通过只改写extra.raw原始文本、不改变 AST 语义值的设计保证转译前后运行时行为零差异。无论是手动配置plugins: [babel/plugin-transform-json-strings]还是借助babel/preset-env按目标环境自动启用它都是处理 ECMAScript 2019 JSON superset 语法降级时的标准答案。理解它的实现细节也能帮助你举一反三地掌握 Babel 插件中文本层转换这一通用模式。【免费下载链接】babel Babel is a compiler for writing next generation JavaScript.项目地址: https://gitcode.com/gh_mirrors/ba/babel创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
