跟着阮神学ES6——Babel 转码器

Babel 是什么？

Babel 是一个普遍使用的 ES6 转码器，能够将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。react

Babel 的用途？

Babel 能将 ES6 代码转为 ES5 代码，让开发者能够用 ES6 的方式编写程序，又不用担忧现有环境是否支持。es6

Babel 如何使用？

安装 Babelnpm

$ npm install --save-dev @babel/core
复制代码

配置文件.babelrcjson

# 最新转码规则
$ npm install --save-dev @babel/preset-env
$ npm install --save-dev @babel/preset-react
复制代码

{
    "presets": [
        "@babel/env",
        "@babel/preset-react"
    ],
    "plugins": []
}
复制代码

命令行转码浏览器

$ npm install --save-dev @babel/cli

# 单个文件转码
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src -d lib
复制代码

@babel/register 模块bash

@babel/register 模块改写require 命令，为它加上一个钩子。此后，每当使用require 加载.js 、.jsx 、.es 和.es6 后缀名的文件，就会先用 Babel 进行转码。babel
```
$ npm install --save-dev @babel/register
复制代码
```
注意1：@babel/register 只会对require 命令加载的文件转码，而不会对当前文件转码。markdown

注意2：因为它是实时转码，因此只适合在开发环境使用。函数

Babel的限制与polyfill使用

Babel的限制是什么？

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，好比Iterator 、Generator 、Set 、Map 、Proxy 、Reflect 、Symbol 、Promise 等全局对象，以及一些定义在全局对象上的方法（好比Object.assign ）都不会转码。ui

如何运行Babel不转码的API？

Babel 不会转码ES6新的 API，若是想让这些方法运行，可使用core-js 和regenerator-runtime (后者提供generator函数的转码)之类的库，为当前环境提供一个垫片。