企业官网建设流程全解析

Babel 插件 transform-exponentiation-operator：将 ES2016 指数运算符编译为 ES5

【免费下载链接】babel🐠 Babel is a compiler for writing next generation JavaScript.项目地址: https://gitcode.com/gh_mirrors/ba/babel

导读

@babel/plugin-transform-exponentiation-operator是 Babel 官方插件，用于将 ECMAScript 2016（ES7）新增的指数运算符**与指数赋值运算符**=编译为 ES5 环境可运行的Math.pow()调用。本文以该插件在仓库中的 README 文档为骨架，结合其 源码实现 与 测试用例，系统讲解安装方式、转换原理、复杂表达式（如属性赋值、getter 记忆化、默认参数）的降级策略，帮助你理解 Babel 插件在 AST 层面的工作方式，并能在项目与@babel/preset-env中正确配置使用。

插件简介

Compile exponentiation operator to ES5

该插件的作用一句话概括：把指数运算符编译到 ES5。它解决的核心问题是：在Math.pow之外的语法层面，让现代 JavaScript 中的a ** b写法可以在旧版浏览器或旧版 Node.js 环境中正常执行。

指数运算符**由 ECMAScript 2016 引入，同时提供了二元形式（2 ** 3）与复合赋值形式（x **= 2，等价于x = x ** 2）。在 ES5 环境中两者都无法解析，因此需要本插件在 AST 层面将其改写为Math.pow调用。

该插件的官方文档入口为 Babel 官网对应的 @babel/plugin-transform-exponentiation-operator，包版本为8.0.1（见 package.json）。

安装

该插件属于 Babel 的 transform 插件，仅在编译期使用，因此应当安装到开发依赖（devDependencies）。

使用 npm：

npm install --save-dev @babel/plugin-transform-exponentiation-operator

或使用 yarn：

yarn add @babel/plugin-transform-exponentiation-operator --dev

安装完成后即可在 Babel 配置中通过plugins字段启用：

{ "plugins": ["@babel/plugin-transform-exponentiation-operator"] }

从 package.json 可以看到，插件的运行时依赖仅有@babel/helper-plugin-utils（用于declare包装与版本断言），peerDependencies 为@babel/core（^8.0.0），这意味着它是与 Babel 8 配套发布的版本。对于绝大多数使用@babel/preset-env的项目，该插件已被 preset-env 按目标环境自动启用，无需手动配置（详见后文"与 preset-env 的关系"小节）。

转换原理：从**到Math.pow

插件入口与版本校验

插件的入口文件是 src/index.ts，整体结构为：

import { declare } from "@babel/helper-plugin-utils"; import type { types as t, Scope } from "@babel/core"; export default declare(api => { api.assertVersion(REQUIRED_VERSION("^7.0.0-0 || ^8.0.0")); const { types: t, template } = api; function build(left: t.Expression, right: t.Expression) { return t.callExpression( t.memberExpression(t.identifier("Math"), t.identifier("pow")), [left, right], ); } // ... visitor 实现 });

关键点如下：

• declare来自@babel/helper-plugin-utils，是 Babel 插件标准的声明包装；
• api.assertVersion("^7.0.0-0 || ^8.0.0")用于校验宿主 Babel 版本，保证插件与 Babel 7/8 的 API 兼容；
• 核心的build函数将左侧表达式与右侧表达式构造成Math.pow(left, right)的 AST 节点，这是所有转换动作的最终落点。

BinaryExpression：处理a ** b

插件在 visitor 中注册了BinaryExpression与AssignmentExpression两个节点访问器。先看二元形式：

BinaryExpression(path) { const { node } = path; if (node.operator === "**") { path.replaceWith(build(node.left, node.right)); } },

当二元表达式的运算符是**时，直接将该节点替换为Math.pow(left, right)。测试用例 binary/input.js 与 binary/output.js 给出最直观的验证：

输入：

2 ** 2;

输出：

Math.pow(2, 2);

赋值形式：处理x **= 2

指数赋值运算符**=语义上是x = x ** 2，但插件在实现上有更细致的分支：当左侧是普通标识符时，直接展开；当左侧是成员表达式（属性访问）时，则需要考虑求值次数与副作用。

普通标识符的展开

对于num **= 2这类左侧为标识符的场景，visitor 走else分支：

path.replaceWith( t.assignmentExpression( "=", node.left, build(t.cloneNode(node.left) as t.Identifier, node.right), ), );

即把num **= 2改写为num = Math.pow(num, 2)。对应的测试见 assignment/input.js 与 assignment/output.js：

输入：

var num = 1; num **= 2;

输出：

var num = 1; num = Math.pow(num, 2);

成员表达式的记忆化（memoisation）

当左侧是成员表达式时，直接改写为obj.x = Math.pow(obj.x, 2)会引入一个语义错误：obj会被求值两次。若obj是一个带 getter 的对象或一个会产生副作用的调用表达式，两次求值会改变程序行为。

测试用例 memoise-object/exec.js 精确地验证了这一点：

var counters = 0; Object.defineProperty(global, "reader", { get: function () { counters += 1; return { x: 2 }; }, configurable: true }); reader.x **= 2; expect(counters).toBe(1);

reader的 getter 在原生语义下**=只会被读取一次，因此断言counters为 1。若不加处理直接展开，getter 会被访问两次，断言失败。

插件用maybeMemoize函数解决该问题。其逻辑是：

function maybeMemoize<T extends t.Expression | t.Super>(node: T, scope: Scope) { // 静态节点（字面量、已声明的不可变引用等）无需缓存 if (scope.isStatic(node)) { return { assign: node, ref: t.cloneNode(node) }; } // 处于函数参数（Pattern）中时无法注入临时变量，返回 null 走 IIFE 分支 if (scope.path.isPattern()) { return null; } // 生成一个基于原节点的唯一标识符并推入作用域 const id = scope.generateUidIdentifierBasedOnNode(node); scope.push({ id }); return { assign: t.assignmentExpression("=", t.cloneNode(id), node as t.Expression), ref: t.cloneNode(id), }; }

• 对于静态节点（例如字面量），直接克隆一份引用即可，因为它的值不会因求值次数而变化；
• 对于非静态节点，生成一个基于原节点的唯一标识符（如_reader）推入当前作用域，用id = obj的赋值表达式缓存对象引用，之后用id代替obj参与Math.pow，保证对象只被求值一次。

对应的转换结果在 memoise-object/output.js：

输入：

reader.x **= 2;

输出：

var _reader; (_reader = reader).x = Math.pow(_reader.x, 2);

计算属性与普通属性的处理

在成员表达式分支中，插件还会区分computed（计算属性，如obj[key]）与普通属性（如obj.x）：

if (computed) { const prop = maybeMemoize(property, scope)!; member1 = t.memberExpression(object.assign, prop.assign, true); member2 = t.memberExpression(object.ref, prop.ref, true); } else { member1 = t.memberExpression(object.assign, property, false); member2 = t.memberExpression(object.ref, t.cloneNode(property), false); }

• 对于计算属性obj[key] **= 2，key也需要被记忆化，否则key表达式同样会被求值两次，因此对property再调用一次maybeMemoize；
• 对于普通属性，property是标识符或字符串字面量，属于静态节点，直接克隆复用即可。

边界场景：默认参数中的 IIFE 回退

maybeMemoize中有一种特殊返回：当scope.path.isPattern()为真（即当前节点位于函数参数的解构模式中）时，无法在函数参数位置注入临时变量，此时返回null。visitor 检测到null后走回退分支：

if (!object) { // We need to inject a temp var, but we are in function parameters // and thus cannot. Wrap the expression in an IIFE. It will be // eventually requeued and transformed. path.replaceWith(template.expression.ast`(() => ${path.node})()`); return; }

即把整个表达式用**立即执行函数表达式（IIFE）**包裹，将对象求值次数隔离在函数内部，之后该 IIFE 会重新进入遍历队列并被再次转换。测试用例 memoise-object-in-default-args 演示了这一场景：

输入（input.js）：

function fn(a, b = a.b.c **= 2) { }

输出（output.js）：

function fn(a, b = (_a$b => (_a$b = a.b).c = Math.pow(_a$b.c, 2))()) {}

可以看到，a.b被记忆化到 IIFE 参数_a$b中，从而保证a.b只被求值一次。

回归测试：super与历史 Bug 修复

插件目录下还保留了多个回归测试（test/fixtures/regression），用于防止历史 Bug 复发。

super 属性的指数赋值（Issue 4349）

regression/4349/input.js 覆盖了在super属性上使用**=的场景：

foo = { bar() { return super.baz **= 12; } }

由于super无法被当作普通表达式缓存到临时变量中，源码注释也特别说明：maybeMemoize的类型参数包含t.Super，且在isStatic检查之外super需要特殊处理（scope.isStatic对super返回false，但若直接注入临时变量语义错误）。该目录下的options.json会以特定配置运行转换并校验输出结果，配套的4349-keep-super目录进一步验证super保留语义的正确性。

其他回归场景（Issue 4403）

regression/4403 同样携带独立的options.json配置，用于覆盖历史上报的边界行为，保证后续重构不破坏既有输出。

运算语义验证：comprehensive 执行测试

除了 AST 快照式的 input/output 测试，仓库还提供了运行期验证测试 comprehensive/exec.js，直接断言转换后代码的运行时行为：

expect(2 ** 3).toBe(8); expect(3 * (2 ** 3)).toBe(24); var x = 2; expect(2 ** ++x).toBe(8); expect(2 ** -1 * 2).toBe(1); var calls = 0; var q = {q: 3}; var o = { get p() { calls++; return q; } }; o.p.q **= 2; expect(calls).toBe(1); expect(o.p.q).toBe(9); expect(2 ** (3 ** 2)).toBe(512);

该测试覆盖的语义要点包括：

• 基本的幂运算结果（2 ** 3 === 8）；
• 运算符优先级：3 * (2 ** 3)中**优先级高于*，结果为 24；
• 一元运算符与指数运算的交互：2 ** ++x、2 ** -1 * 2；
• 嵌套成员表达式o.p.q **= 2时 getter 只被调用一次，且赋值结果正确（o.p.q变为 9）；
• 右结合性：2 ** (3 ** 2) === 512（指数运算是唯一右结合的二元运算符）。

这些断言从运行语义层面确认了转换后的Math.pow版本与原**语义完全等价，是快照测试之外的第二重保障。

与 preset-env 的关系与使用建议

该插件是@babel/preset-env内置的 transform 插件之一。在实际项目中，绝大多数场景无需手动引入本插件，而是通过 preset-env 的targets配置按需启用。例如：

{ "presets": [ ["@babel/preset-env", { "targets": "> 0.25%, not dead" }] ] }

preset-env 会根据目标环境是否原生支持指数运算符来决定是否启用本插件：若目标环境（如新版 Chrome、Node.js 16+）已支持**，则自动跳过转换，避免多余的Math.pow调用；若目标环境较旧，则自动启用。手动单独使用本插件的场景通常是：你已经使用了@babel/plugin-transform-*系列的精确控制策略，或 preset-env 配置了"modules": false等自定义组合。

需要说明的是，插件只负责语法层面的降级（**→Math.pow），不包含Math.pow相关的 polyfill；由于Math.pow自 ES3 起就是标准内置方法，因此无需额外 polyfill。

小结

@babel/plugin-transform-exponentiation-operator是一个小巧但实现严谨的 Babel 插件：

• 二元形式a ** b直接替换为Math.pow(a, b)；
• 赋值形式x **= 2展开为x = Math.pow(x, 2)；
• 成员表达式通过临时变量记忆化保证对象与计算属性只求值一次，避免 getter 副作用被放大；
• 函数默认参数等无法注入临时变量的场景，以 IIFE 包裹实现等价的求值隔离；
• 配套测试覆盖super、运算符优先级、右结合性、getter 调用次数等语义细节。

如果你希望进一步研究其实现细节，可查看 插件源码、测试目录 以及 package.json；若想观察完整测试的运行方式，可参考仓库根目录的 package.json 中定义的 jest 相关脚本。

【免费下载链接】babel🐠 Babel is a compiler for writing next generation JavaScript.项目地址: https://gitcode.com/gh_mirrors/ba/babel