ES6開發-babel

大部分瀏覽器還不支持es6語法，需要搭建es6的開發環境將es6編譯成es5

使用Bable將ES6編譯成ES5

• 創建工程目錄爲Test，命令npm init -y生成的默認的package.json(下載代碼後就只需要執行 npm install 後就會自動安裝項目依賴的包)
• 在項目工程下創建index文件夾用於存放開發中編寫的ES6代碼以及Bable編譯生成的ES5
• 進入到項目目錄，使用命令安裝Babel(需要先安裝好node環境)

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

• 在項目根目錄創建配置文件.babelrc，用於設置轉碼規則與插件，首先需要安裝規則集

# 最新轉碼規則
$ npm install --save-dev @babel/preset-env

# react 轉碼規則
$ npm install --save-dev @babel/preset-react

• 將規則加入到.babelrc中

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

開發環境

@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

瀏覽器環境下 @babel/standalone

• 瀏覽器實時轉碼會對性能有影響

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

生產環境

命令行轉碼工具 @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 提供一個REPL 在線編譯器，可以在線將 ES6 代碼轉爲 ES5 代碼。轉換後的代碼，可以直接作爲 ES5 代碼插入網頁運行

注意

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

• 舉例來說，ES6 在Array對象上新增了Array.from方法。Babel 就不會轉碼這個方法。如果想讓這個方法運行，必須使用babel-polyfill，爲當前環境提供一個墊片

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

• 在es6腳本頭部引入

import '@babel/polyfill';
// 或者
require('@babel/polyfill');

具體參考阮一峯的ECMAScript 6入門