前端高频面试题-精选篇-ES6模块

先分清这三个词指的是什么：

• ES5 —— 2009 年发布的语言标准，是 ES6 之前用了六年的版本。
• ES2015 —— 2015 年 6 月发布的那一版标准，正式名称就叫 ECMAScript 2015。
• ES6 —— ES2015 在制定期间的代号。因为它是第 6 版，社区叫惯了 ES6，发布后名字改成按年份命名，但口语里 ES6 一直沿用下来。

所以严格说：ES6 = ES2015，是同一版标准的两个叫法。

但日常语境里 ES6 经常被泛化使用，指"ES2015 及之后的所有现代 JS"—— 比如有人说"这段代码用了 ES6"，里面可能有 ES2017 的 async/await 或 ES2020 的可选链。这种用法不精确但很常见，面试时能点破这一点是加分项。

为什么 2015 年之后改成按年份命名？

ES6 制定了整整六年（ES5 是 2009 年），中间积压了大量特性一次性发布，导致规模庞大、浏览器实现缓慢。TC39 因此改成了年度发布制：每年 6 月发布一版，成熟一个特性就纳入一个，避免再出现"一版憋六年"的情况。

后续版本的代表特性：

工程上更值得关心的是"我能用哪些"：这不由标准版本决定，而由你的 browserslist 基线和构建配置决定。语法交给 Babel 转译，新 API 靠 core-js polyfill —— 所以真正要回答的是"目标浏览器支持到哪"，而不是"这是 ES 几"。

Babel 是一个 JavaScript 编译器（更准确说是源码到源码的转换器），核心作用是让你能用最新的语法写代码，同时产出目标环境能跑的代码。

它的工作流程是标准的三段式：

源码 → [解析 Parse] → AST → [转换 Transform] → 新 AST → [生成 Generate] → 目标代码

• 解析：@babel/parser 把源码变成抽象语法树
• 转换：各个插件遍历 AST，把新语法节点改写成旧语法节点 —— 这一步是所有插件工作的地方
• 生成：@babel/generator 把新 AST 打印回代码字符串

最关键的一条：Babel 默认只转换语法，不转换 API。

// ✅ 语法：箭头函数会被转成 function
const fn = () => {}

// ❌ API：Promise、Array.prototype.at、Object.fromEntries 不会被转
// 低版本环境依然报 undefined is not a function
[1, 2, 3].at(-1)

要补 API 得靠 core-js 提供的 polyfill，通过 @babel/preset-env 的 useBuiltIns 配置注入：

{
  presets: [['@babel/preset-env', {
    useBuiltIns: 'usage',   // 按代码里实际用到的 API 注入
    corejs: 3,
  }]]
}

注意 usage 默认不处理 node_modules，第三方库里用了新 API 时会漏掉，这类"本地好好的、线上老手机白屏"的问题通常就出在这。

写库和写应用的配置不一样：库项目应该用 @babel/plugin-transform-runtime，它把 helper 函数和 polyfill 从全局环境改为按模块引入，避免污染使用方的全局对象。应用项目才用 useBuiltIns。

Babel 的另一半价值是插件生态：JSX 转换、TypeScript 类型擦除、装饰器、按需引入组件库（babel-plugin-import）、React Fast Refresh 都是 Babel 插件。所以它早已不只是"ES6 转 ES5"的工具，而是整个 JS 工具链的 AST 处理层。

现在的替代品：esbuild、SWC 用 Go/Rust 重写了同样的能力，速度快一个数量级，Next.js、Vite 都已经默认用它们。Babel 的优势剩下插件生态和对边缘语法的完整支持。