學 babel —從 babel CLI 開始

在學習用 ES6 語法寫網站時,實務上會遇到的第一個阻礙就是瀏覽器支援度問題,使用babel 可以把 ES6+ 的語法 compile 成 vanilla ES5 ,讓人少一份擔心,多一份輕盈。


官網裡,不僅介紹babel ,也介紹 es6,es7語法。其中提供線上編輯器,可以看看寫的es6+語法compile 後會是什麼樣子。

babel 的 compile 時機有許多種,可以在官網的docs 頁面點選並得到詳細設置方法,為了理解基本運作,所以先安裝 CLI 在command 裡操作看看。

Babel CLI:

官網:

建議在專案裡各別安裝,如果是全域安裝會限制專案使用不同版本的自由度,可能升級全域版本後多個專案受影響,另一方面,減少implicit dependency,使專案能在不同環境容易進行初始設定。

安裝
npm install --save-dev babel-cli

安裝了以後,就可以進入 node_modules 使用 babel 指令
./node_modules/.bin/babel xxx

基礎指令使用

先看看 babel 指令的一些用法

將compile 的結果直接印出:

./node_modules/.bin/babel index.js
# compile 過後的 js 語法

指定一個output 檔案:

./node_modules/.bin/babel index.js --out-file index-compiled.js

一直注意檔案的更改並 compile :

./node_modules/.bin/babel index.js --watch --out-file index-compiled.js
/// --watch 可改成 -w

compile 一個資料夾並輸出到另一個資料夾:

./node_modules/.bin/babel src -d  lib

compile 一個資料夾並連續輸出到單一檔案:

./node_modules/.bin/babel src  --out-file script-compiled.js

用看看

首先,建立一個使用es6 語法的 index.js 檔測試

const cats = ['cat1','cat2','cat3'];
const dogs = ['dogs1','dogs2','dogs3'];
const animals = [...cats,'me',...dogs];
const introduce = animals.map((animal)=> {
return `Hello,I am ${animal}`;
})
console.log(introduce);

使用指令 compile 看看 :

$ ./node_modules/.bin/babel index.js
const cats = [‘cat1’, ‘cat2’, ‘cat3’];
const dogs = [‘dogs1’, ‘dogs2’, ‘dogs3’];
let animals = […cats, ‘me’, …dogs];
let introduce = animals.map(animal => {return `Hello,I am ${animal}`;});
console.log(introduce);```

發現他只是把原始檔印出來而已? 原來這裡需要設定.babelrc協助babel 編譯

.babelrc

plugins這頁講到,目前為止babel 做的事情就只像是

const babel = code => code

也就是返回原code。在編譯的過程中,babel 需要 plugins 告訴它要 compile 的檔案會用到哪些語法(例如react 的JSX語法、es6 語法)。

通常會在專案根目錄設定一個 .babelrc 檔,擔任告知 babel 這些資訊的角色,但也可以在 package.json 或在 babel 指令中設定。

.babelrc 裡的架構長得像這樣:

{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
}

plugins 在官網有列一份已存的清單,裡面也有提供怎麼寫自己 plugin 的教學。

不過為了方便設定,babel 提供了 presets 這個選項,把常用的 plugins 組合合併成一個個 preset,只要安裝 presets 就可以省去逐一安裝plugins 的心神。目前提供的presets 有這幾種:

隨便進到一個preset 頁面,以 react 為例,可以看到它包含了這些 plugins:

在使用 presets 前,需要進行安裝。

再用看看

了解了 .babelrc 後,下載需要用的 presets (es2015 )

npm install — save-dev babel-preset-es2015

把這段加入 babelrc 裡

{
"presets": [
"es2015"
]
}

編譯一次

$ ./node_modules/.bin/babel index.js --out-file index-compile.js

在 index-compile.js 檔裡面:

‘use strict’;
var cats = [‘cat1’, ‘cat2’, ‘cat3’];
var dogs = [‘dogs1’, ‘dogs2’, ‘dogs3’];
var animals = [].concat(cats, [‘me’], dogs);
var introduce = animals.map(function (animal) {
return ‘Hello,I am ‘ + animal;
});
console.log(introduce);

發現它成功的把 es6 語法變成 es5 了。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.