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


簡單來說把 JavaScript 中 es2015/2016/2017/2046 的新語法轉(zhuǎn)化為 es5，讓低端運(yùn)行環(huán)境(如瀏覽器和 node )能夠認(rèn)識并執(zhí)行。嚴(yán)格來說，babel 也可以轉(zhuǎn)化為更低的規(guī)范。但以目前情況來說，es5 規(guī)范已經(jīng)足以覆蓋絕大部分瀏覽器，因此常規(guī)來說轉(zhuǎn)到 es5 是一個安全且流行的做法。
ES6轉(zhuǎn)ES5（第一種）
初始化項(xiàng)目

npm init --y



安裝依賴

npm install babel-cli -D



npm install babel-preset-es2015 -D



在項(xiàng)目中創(chuàng)建并編輯ES6文件

這里只是使用es6的語法舉下例子，看下能否轉(zhuǎn)譯成es5語法。我們假設(shè)取名index.js，放在項(xiàng)目根目錄的src文件夾里。

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

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



編輯package.json

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

    build-t ：單獨(dú)編譯某個文件
    build-d：把一個文件夾內(nèi)的所有文件統(tǒng)一編譯到另一個文件夾里（文件夾自動生成，不需要自己創(chuàng)建）
    build-o：把一個文件夾內(nèi)的指定文件編譯到另外的文件夾里（文件夾需要自己創(chuàng)建，可以指定文件名）

{
  "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轉(zhuǎn)ES5（第二種）

其實(shí)跟第一種差不多。
初始化項(xiàng)目

npm init --y



安裝依賴

npm install babel-cli -D



npm install babel-preset-es2015 -D



在項(xiàng)目中創(chuàng)建并編輯ES6文件

這里只是使用es6的語法舉下例子，看下能否轉(zhuǎn)譯成es5語法。我們假設(shè)取名index.js，放在項(xiàng)目根目錄的src文件夾里。

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

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



在項(xiàng)目中創(chuàng)建并編輯.babelrc文件

在根目錄下創(chuàng)建.babelrc文件。

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



編輯package.json

我們需要自己在scripts字段里添加命令，命令內(nèi)容與第一種方法的一樣，這里只不過省了--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+轉(zhuǎn)ES5

這里 ES6+ 說的是ES6、ES7、ES8等。
初始化項(xiàng)目

npm init --y



安裝依賴

npm install babel-cli -D



npm install babel-preset-env -D



在項(xiàng)目中創(chuàng)建并編輯ES6文件

這里只是使用es6的語法舉下例子，看下能否轉(zhuǎn)譯成es5語法。我們假設(shè)取名index.js，放在項(xiàng)目根目錄的src文件夾里。

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

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



在項(xiàng)目中創(chuàng)建并編輯.babelrc文件

在根目錄下創(chuàng)建.babelrc文件。

{
    "presets": ["env"]
}



編輯package.json

命令內(nèi)容不只是這一個，根據(jù)你需求寫，其他命令可以看上面的ES6轉(zhuǎn)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);
};



結(jié)語

本篇主要介紹了ES6轉(zhuǎn)ES5的兩種方法以及ES6+怎樣轉(zhuǎn)ES5。不過現(xiàn)在大部分使用ES6+怎樣轉(zhuǎn)ES5比較多，主要讓大家體驗(yàn)下升級的感覺。

作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

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