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

Babel 是什么？

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。

Babel 的用途？

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

Babel 如何使用？

1. 安装 Babel

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

2. 配置文件.babelrc

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

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

3. 命令行转码

   $ npm install --save-dev @babel/cli
   
   # 单个文件转码
   # --out-file 或 -o 参数指定输出文件
   $ npx babel example.js -o compiled.js
   
   # 整个目录转码
   # --out-dir 或 -d 参数指定输出目录
   $ npx babel src -d lib
   

4. @babel/register 模块

   @babel/register 模块改写require 命令，为它加上一个钩子。此后，每当使用require 加载.js 、.jsx 、.es 和.es6 后缀名的文件，就会先用 Babel 进行转码。

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

   注意1：@babel/register 只会对require 命令加载的文件转码，而不会对当前文件转码。

   注意2：由于它是实时转码，所以只适合在开发环境使用。

Babel的限制与polyfill使用

Babel的限制是什么？

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

如何运行Babel不转码的API？

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