相關連結：https://es6.ruanyifeng.com/#docs/intro

官網：https://www.babeljs.cn/

Babel 轉碼器

Babel是一個廣泛使用的 ES6 轉碼器，可以將 ES6 程式碼轉為 ES5 程式碼，從而在老版本的瀏覽器執行。這意味著，你可以用 ES6 的方式編寫程式，又不用擔心現有環境是否支援。下面是一個例子。

// 轉碼前

input.map(item => item + 1);

 

// 轉碼後

input.map(function (item) {

  return item + 1;

});

上面的原始程式碼用了箭頭函式，Babel 將其轉為普通函式，就能在不支援箭頭函式的 JavaScript 環境執行了。

下面的命令在專案目錄中，安裝 Babel。

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

配置檔案.babelrc

Babel 的配置檔案是.babelrc，存放在專案的根目錄下。使用 Babel 的第一步，就是配置這個檔案。

該檔案用來設定轉碼規則和外掛，基本格式如下。

{

  "presets": [],

  "plugins": []

}

presets欄位設定轉碼規則，官方提供以下的規則集，你可以根據需要安裝。

# 最新轉碼規則

$ npm install --save-dev @babel/preset-env

# react 轉碼規則

$ npm install --save-dev @babel/preset-react

然後，將這些規則加入.babelrc。

  {

    "presets": [

      "@babel/env",

      "@babel/preset-react"

    ],

    "plugins": []

  }

注意，以下所有 Babel 工具和模組的使用，都必須先寫好.babelrc。

命令列轉碼

Babel 提供命令列工具@babel/cli，用於命令列轉碼。

它的安裝命令如下。

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

基本用法如下。

# 轉碼結果輸出到標準輸出

$ npx babel example.js

# 轉碼結果寫入一個檔案

# --out-file 或 -o 引數指定輸出檔案

$ npx babel example.js --out-file compiled.js

# 或者

$ npx babel example.js -o compiled.js

# 整個目錄轉碼

# --out-dir 或 -d 引數指定輸出目錄

$ npx babel src --out-dir lib

# 或者

$ npx babel src -d lib

# -s 引數生成source map檔案

$ npx babel src -d lib -s

babel-node

@babel/node模組的babel-node命令，提供一個支援 ES6 的 REPL 環境。它支援 Node 的 REPL 環境的所有功能，而且可以直接執行 ES6 程式碼。

首先，安裝這個模組。

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

然後，執行babel-node就進入 REPL 環境。

$ npx babel-node

> (x => x * 2)(1)

2

babel-node命令可以直接執行 ES6 指令碼。將上面的程式碼放入指令碼檔案es6.js，然後直接執行。

# es6.js 的程式碼

# console.log((x => x * 2)(1));

$ npx babel-node es6.js

2

@babel/register 模組

@babel/register模組改寫require命令，為它加上一個鉤子。此後，每當使用require載入.js、.jsx、.es和.es6字尾名的檔案，就會先用 Babel 進行轉碼。

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

使用時，必須首先載入@babel/register。

// index.js

require('@babel/register');

require('./es6.js');

然後，就不需要手動對index.js轉碼了。

$ node index.js

2

需要注意的是，@babel/register只會對require命令載入的檔案轉碼，而不會對當前檔案轉碼。另外，由於它是實時轉碼，所以只適合在開發環境使用。

polyfill

Babel 預設只轉換新的 JavaScript 句法（syntax），而不轉換新的 API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全域性物件，以及一些定義在全域性物件上的方法（比如Object.assign）都不會轉碼。

舉例來說，ES6 在Array物件上新增了Array.from方法。Babel 就不會轉碼這個方法。如果想讓這個方法執行，可以使用core-js和regenerator-runtime(後者提供generator函式的轉碼)，為當前環境提供一個墊片。

安裝命令如下。

$ npm install --save-dev core-js regenerator-runtime

然後，在指令碼頭部，加入如下兩行程式碼。

import 'core-js';

import 'regenerator-runtime/runtime';

// 或者

require('core-js');

require('regenerator-runtime/runtime);

Babel 預設不轉碼的 API 非常多，詳細清單可以檢視babel-plugin-transform-runtime模組的definitions.js檔案。

瀏覽器環境

Babel 也可以用於瀏覽器環境，使用@babel/standalone模組提供的瀏覽器版本，將其插入網頁。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">

// Your ES6 code

</script>

注意，網頁實時將 ES6 程式碼轉為 ES5，對效能會有影響。生產環境需要載入已經轉碼完成的指令碼。

Babel 提供一個REPL 線上編譯器，可以線上將 ES6 程式碼轉為 ES5 程式碼。轉換後的程式碼，可以直接作為 ES5 程式碼插入網頁執行。