一分鐘入門 Babel（下一代 JavaScript 語法的編譯器）

簡單來說把 JavaScript 中 es2015/2016/2017/2046 的新語法轉化爲 es5，讓低端運行環境(如瀏覽器和 node )能夠認識並執行。嚴格來說，babel 也可以轉化爲更低的規範。但以目前情況來說，es5 規範已經足以覆蓋絕大部分瀏覽器，因此常規來說轉到 es5 是一個安全且流行的做法。

ES6轉ES5（第一種）

初始化項目

npm init --y

安裝依賴

npm install babel-cli -D

npm install babel-preset-es2015 -D

在項目中創建並編輯ES6文件

這裏只是使用es6的語法舉下例子，看下能否轉譯成es5語法。我們假設取名index.js，放在項目根目錄的src文件夾裏。

// src/index.js
let a = 1;

let fun = ()=>{
    console.log(a);
}

編輯package.json

我們需要自己在scripts字段裏添加命令：

• build-t ：單獨編譯某個文件
• build-d：把一個文件夾內的所有文件統一編譯到另一個文件夾裏（文件夾自動生成，不需要自己創建）
• build-o：把一個文件夾內的指定文件編譯到另外的文件夾裏（文件夾需要自己創建，可以指定文件名）

{
  "name": "babel01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build-t":"babel index.js --presets es2015",
    "build-d": "babel src -d lib --presets es2015",
    "build-o":"babel src/index.js -o dist/index.js --presets es2015"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

啓動編譯

npm run <這裏是scripts字段的命令>

下面是編譯後的es5文件。

"use strict";

var a = 1;

var fun = function fun() {
    console.log(a);
};

ES6轉ES5（第二種）

其實跟第一種差不多。

初始化項目

npm init --y

安裝依賴

npm install babel-cli -D

npm install babel-preset-es2015 -D

在項目中創建並編輯ES6文件

這裏只是使用es6的語法舉下例子，看下能否轉譯成es5語法。我們假設取名index.js，放在項目根目錄的src文件夾裏。

// src/index.js
let a = 1;

let fun = ()=>{
    console.log(a);
}

在項目中創建並編輯.babelrc文件

在根目錄下創建.babelrc文件。

{
    "presets": ["es2015"],
    "plugins": []
}

編輯package.json

我們需要自己在scripts字段裏添加命令，命令內容與第一種方法的一樣，這裏只不過省了--presets es2015。

{
  "name": "babel01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
	 "build":"babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

啓動編譯

npm run build

下面是編譯後的es5文件。

"use strict";

var a = 1;

var fun = function fun() {
    console.log(a);
};

ES6+轉ES5

這裏 ES6+ 說的是ES6、ES7、ES8等。

初始化項目

npm init --y

安裝依賴

npm install babel-cli -D

npm install babel-preset-env -D

在項目中創建並編輯ES6文件

這裏只是使用es6的語法舉下例子，看下能否轉譯成es5語法。我們假設取名index.js，放在項目根目錄的src文件夾裏。

// src/index.js
let a = 1;

let fun = ()=>{
    console.log(a);
}

在項目中創建並編輯.babelrc文件

在根目錄下創建.babelrc文件。

{
    "presets": ["env"]
}

編輯package.json

命令內容不只是這一個，根據你需求寫，其他命令可以看上面的ES6轉ES5（第一種）。

{
  "name": "babel01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
	 "build": "babel src -d dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

啓動編譯

npm run build

下面是編譯後的es5文件。

"use strict";

var a = 1;

var fun = function fun() {
    console.log(a);
};

結語

本篇主要介紹了ES6轉ES5的兩種方法以及ES6+怎樣轉ES5。不過現在大部分使用ES6+怎樣轉ES5比較多，主要讓大家體驗下升級的感覺。如果覺得不錯，麻煩關注下俺的公衆號哦，會不定時發放前端電子書以及學習進階視頻。

---

作者：Vam的金豆之路

主要領域：前端開發

我的微信：maomin9761

微信公衆號：前端歷劫之路

---