厘清各种 Babel 概念: babel-core 和 @babel/core 是什么关系？@babel/preset-env 有什么用？

[suukii]

babel-core 和 @babel/core 有什么区别？

本质上，@babel/core 就是一个新版本的 babel-core。之所以改了名字，是因为 Babel 团队希望能把官方的模块和社区的模块区分开来，所以从 Babel7 开始，Babel 就使用了 scoped packages 的方式，将官方的模块名统一由 babel- 改为 @babel/。

@babel/core 有什么用？

Babel 是一个编译器，负责将 ES6 转换成 ES5，或者你也可以转换成 ES3。

更准确地说，Babel 是一个 transplier(or source-to-source compiler)，一般 compiler 是将高级语言转换成机器语言，而 transpiler 则是将高级语言转换成另一种高级语言，比如 Babel 将 ES6 转换成 ES5。TypeScript 编译器也是一个 transpiler，将 TypeScript 转换成 JavaScript。

而 @babel/core 是 Babel 的核心库，它的编译工作可以分为 3 个阶段：

1. parsing: 将 JS 源码解析成 AST
2. transforming: 对生成的 AST 进行修改
3. generating: 将修改后的 AST 转换成 JS 代码

其中第二步 transforming 就是将 ES6 转换成 ES5 的关键，但 @babel/core 在这一步其实什么都没做。如果单用 @babel/core 来编译 JS，我们得到的编译结果和源码是一模一样的。想要对源码进行转化，就必需引入 plugin 或者 preset。

plugin 和 preset 是什么？

Babel 的官网也说了，Babel doesn’t do anything out of the box，所有的事情是通过引入 plugin 和 preset 来完成的。

plugin

举个例子，如果我们在源码中使用了箭头函数语法，而低版本的浏览器可能并不支持箭头函数语法。我们就需要引入 Babel plugin @babel/transform-arrow-functions 来完成这个任务。

每个 plugin 都是一个独立的 npm 包，使用时，我们只需要通过 npm 下载并通过配置文件告诉 Babel 在编译过程中要用哪些 plugin 来对源码进行处理。

但是，每个 plugin 只负责一件事，比如 @babel/transform-arrow-functions 就是将箭头函数转换成普通函数。但 ES6 的新特性那么多，我们总不能每用到一个新特性就手动引入一个 plugin 来处理它们吧，这不合理呀，于是 preset 就出现了。

preset

实际上，preset 就相当于一堆 plugin 的集合。为了让我们不用一个一个 plugin 地安装，Babel 就把一些常用的 plugin 打包成了一个 preset。我们只要安装某个 preset，就相当于安装了 preset 中的所有 plugin。每个 preset 也都是一个独立的 npm 包。

Babel 官方的 perset 有以下 4 个，另外社区也有很多 preset，你甚至还可以写一个自己的 preset：

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

@babel/preset-env 有什么用？

@babel/preset-env 是官方的一个 preset。

在使用 plugin 的时候，我们需要什么功能就要引入对应的 plugin，而在使用 preset 的时候，完全不需要这么麻烦。

使用 @babel/preset-env 的时候，我们只需要通过配置文件告诉 Babel，我们想要支持哪些环境，是浏览器还是 Node，是哪些版本的浏览器，Babel 就会根据这些配置合理地对代码进行编译。

配置项可以在 .babelrc 或者 package.json 文件中指定，也可以使用 .browserlistrc 文件。

如果没有配置，Babel 就会根据默认配置来进行编译。(这是不推荐的用法)

浏览器版本越低，支持的功能就越少，如果我们要兼容这样的浏览器，需要进行编译的源码也就越多，编译后的代码量就会很大。如果我们合理地设置需要支持的浏览器，Babel 会根据这个设置合理地编译源码，浏览器都支持的功能就不需要再编译了，代码量就减少了。

@babel/polyfill 和 core-js 的关系是什么？

长话短说

首先，@bable/polyfill 已经是 deprecated 了(从 Babel7.4.0 开始)，官方文档现在推荐使用 core-js/stable(用于支持 ES 新特性) 和 regenerator-runtime/runtime(用于支持 generator 语法) 来替代。

为什么 @babel/polyfill deprecated 了？

@bable/polyfill 本来是 core-js 和 regenerator-runtime 的结合体，但是因为它跟 core-js@2 耦合太深，难以升级到 core-js@3，所以被放弃了。

什么是 core-js？

core-js 的特点之一就是模块化，它把各个功能的 polyfill 拆分成模块，这样便于按需引入。

.babelrc 配置文件

.babelrc 是 Babel 的配置文件，我们把这个文件放在项目的根目录下，来告诉 Babel 要使用哪些 plugin 或者 preset。