跟着阮神學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函數的轉碼)之類的庫，爲當前環境提供一個墊片。