Babel

什么是 Babel？

官方的解释 Babel 是一个 JavaScript 编译器，用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前版本和旧版本的浏览器或其他环境中。

通俗来讲，Babel 是 Javascript 编译器 ,将 ES6,ES7 ,ES8 转换成 浏览器都支持的ES5 语法,并提供一些插件来兼容浏览器API的工具。

简单说 Babel 的工作就是：

• 语法转换
• 通过 Polyfill 的方式在目标环境中添加缺失的特性
• JS 源码转换

Babel 的基本原理

原理很简单，核心就是 AST (抽象语法树)。首先将源码转成抽象语法树，然后对语法树进行处理生成新的语法树，最后将新语法树生成新的 JS 代码，整个编译过程可以分为 3 个阶段 parsing (解析)、transforming (转换)、generating (生成)，都是在围绕着 AST 去做文章，话不多说上图：

Babel 只负责编译新标准引入的新语法，比如 Arrow function、Class、ES Modul 等，它不会编译原生对象新引入的方法和 API，比如 Array.includes，Map，Set 等，这些需要通过 Polyfill 来解决

组成

Babel 的核心是在 @babel/core 这个npm 包，围绕在它周围的分别是
@babel/core AST转换的核心

@babel/cli 打包工具

@babel/plugin* Babel 插件机制，Babel基础功能不满足的时候,手动添加些

@babel/preset-env 把许多 @babel/plugin 综合了下，减少配置

@babel/polyfill 把浏览器某些不支持API，兼容性代码全部导入到项目,不管你是不是用到,缺点是代码体积特别大

@babel/runtime 把你使用到的浏览器某些不支持API，按需导入,代码少

上面这些配置总得放在一个地方,.babelrc/babel.config.js 就是放这些配置地方，例如

{
    "presets": [
        ["@babel/preset-env"]
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"],
    ]
}

Babel 只是转换 syntax 层语法,所有需要 @babel/polyfill 来处理API兼容,又因为 polyfill 体积太大，所以通过 preset的 useBuiltIns 来实现按需加载,再接着为了满足 npm 组件开发的需要 出现了 @babel/runtime 来做隔离

安装

安装命令行转码工具

Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：

npm install -g babel-cli
#查看是否安装成功
babel --version

Babel的使用

1、创建babel文件夹

2、初始化项目

npm init -y

3、创建文件 src/example.js ，下面是一段ES6代码：

// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)

4、配置 .babelrc

Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。

{
    "presets": [],
    "plugins": []
}

presets字段设定转码规则，将es2015规则加入 .babelrc：

{
    "presets": ["es2015"],
    "plugins": []
}

5、安装转码器，在项目中安装

npm install --save-dev babel-preset-es2015

6、转码

# npm install --save-dev csv-loader xml-loader
# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2

自定义脚本

1、改写package.json

{
    // ...
    "scripts": {
        // ...
        "build":  "babel src\\example.js -o dist\\compiled.js"
    },
}

2、转码的时候，执行下面的命令

mkdir dist
npm run build

参考：
Babel学习系列
对 babel polyfill 的一些理解
前端工程师的自我修养-关于 Babel 那些事儿
babel归纳总结