# babel

### 什么是 babel

{% hint style="info" %}
`babel` 负责解析新的 `ESMAScript` 的标准，`babel` 运行编译时，会从项目根目录下读取 `.babelrc` 的配置文件，通过分析预设（presets）和插件（plugins）等配置项目，来对最新语法进行编译。
{% endhint %}

### babel、babel-polyfill 和 babel-runtime

* `babel` 将 `Javascript` 分为 `synax`（语法）和 `api` 两部分，`babel` 只负责编译 `ECMAScript` 的最新语法，比如 `let`、 `const`、 箭头函数等，而对于新的 `api` 比如 `Promise`、`include`、`Object.assign` 这种则不进行编译，而是交给 `babel-polyfill` 进行编译。
* `babel-polyfill` 负责将新的 API 封装成浏览器可识别的 API 来覆盖原生，并将所有生成的覆盖代码插入项目源码。
* `babel-polyfill` 虽然提供了新的 API 支持，但是缺陷也比较明显：
  * 全局注册覆盖的 API，污染全局变量
  * 会将新的 API 全部封装导出到源码，不管项目中有没有使用过相关内容，导致导出项目包增大。
* `babel-runtime` 针对 `babel-polyfill` 的问题做了优化：
  * 通过导出包 / 引入包的方式提供新封装的 API ，解决了污染全局变量的问题
  * 结合 `babel-transform-runtime-plugin` 实现自动检测项目所用到的 API ，有选择的编译和引入，解决了导出包增大的问题。
  * 但是 `babel-runtime` 有个问题，就是不能支持实例上的新增 API 方法，例如`[1,2,3].includes(1)` 这种，具体见 [stackOverFlow](https://stackoverflow.com/questions/31781756/is-there-any-practical-difference-between-using-babel-runtime-and-the-babel-poly)。
* `babel-polyfill` 和 `babel-runtime` 对比：
  * `babel-polyfill` 适合在比较大的项目中引入。
  * `babel-runtime` 适合在组件、类库中引用。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mitianyi.gitbook.io/frontend-interview-guide/es6/babel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.