摘要：首先，作為入門的話，的用戶手冊是個(gè)很不錯(cuò)的選擇，里面基本覆蓋了使用的各方面。所以下面主要是我學(xué)習(xí)的一些筆記，姑且當(dāng)作是一篇入門吧。下面我們正式進(jìn)入正題。這也是最常用的一個(gè)用法之一。有兩個(gè)方式進(jìn)行配置。

首先，作為入門的話，Babel的用戶手冊是個(gè)很不錯(cuò)的選擇，里面基本覆蓋了Babel使用的各方面。所以下面主要是我學(xué)習(xí)Babel的一些筆記，姑且當(dāng)作是一篇入門吧。

按照Babel官網(wǎng)的說法，Babel是一個(gè)Javascript編譯器。它可以把用最新標(biāo)準(zhǔn)編寫的Javascript代碼編譯成現(xiàn)在的瀏覽器或者node環(huán)境下能運(yùn)行的代碼，這個(gè)過程叫做“源碼到源碼”編譯，又稱轉(zhuǎn)譯（transpiling）。通過這個(gè)方式，我們就可以提前使用下一代的標(biāo)準(zhǔn)和特性進(jìn)行編碼，然后在現(xiàn)在的環(huán)境下運(yùn)行。

通常我們使用Babel的babel-cli工具在命令行下進(jìn)行文件的編譯。我們可以對babel-cli進(jìn)行全局安裝，也可以把它安裝到項(xiàng)目里。這里我選擇了把它安裝到項(xiàng)目里。這樣做的好處是：

不同的項(xiàng)目可能會(huì)使用不同版本的Babel，使用全局的話只能使用一致的版本

方便項(xiàng)目的部署，使用全局安裝的話意味著對環(huán)境有個(gè)隱式的依賴。

除了babel-cli，還有其他使用Babel的方式，具體可以看用戶手冊。

下面我們開始安裝babel-cli。首先新建一個(gè)工作目錄，并創(chuàng)建package.json文件：

$ npm init -y

安裝babel-cli：

$ npm install --save-dev babel-cli

安裝完我們可以這樣運(yùn)行：

$ ./node_modules/babel-cli/bin/babel.js -V
6.11.4 (babel-core 6.11.4)

但是這樣運(yùn)行很不方便，我們可以通過npm scripts來運(yùn)行Babel。在package.json文件里，我們增加scripts字段，并添加一個(gè)腳本：

{
  "scripts": {
    "build": "babel src -d lib"
  },
  "devDependencies": {
    "babel-cli": "^6.11.4"
  }
}

這里增加了一條名字為build的腳本，命令的內(nèi)容是把src里的文件通過Babel轉(zhuǎn)譯到lib目錄里。然后我們可以通過以下命令運(yùn)行腳本：

$ npm run build

當(dāng)然，現(xiàn)在運(yùn)行這個(gè)命令會(huì)報(bào)錯(cuò)，因?yàn)槲覀儾]有src文件夾。下面我們正式進(jìn)入正題。

首先我們創(chuàng)建src目錄，然后創(chuàng)建一個(gè)js文件index.js：

[1,2,3].map(n => n + 1);

然后運(yùn)行npm run build命令，就會(huì)看到lib文件夾里多了一個(gè)轉(zhuǎn)譯后的文件index.js。但是打開來看會(huì)發(fā)現(xiàn)這個(gè)轉(zhuǎn)譯后的文件跟源文件并沒有區(qū)別。因?yàn)锽abel需要你通過插件（Plugin）或者預(yù)設(shè)（presets）告訴它做什么。例如我們可以通過babel-preset-es2015告訴Babel把ES2015的文件轉(zhuǎn)譯成ES5。這也是Babel最常用的一個(gè)用法之一。

要使用插件或者預(yù)設(shè)（相當(dāng)于一組插件），我們需要在Bable的配置文件里面進(jìn)行配置。有兩個(gè)方式進(jìn)行配置。

第一個(gè)方式是通過.babelrc文件：

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

第二個(gè)方式是使用package.json文件：

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [],
    "plugins": []
  }
}

上面說過，預(yù)設(shè)就是一組插件的集合，例如預(yù)設(shè)babel-preset-es2015就是把一堆跟ES2015有關(guān)的插件組合起來提供編譯ES2015代碼為ES5代碼的功能。下面我們開始使用babel-preset-es2015預(yù)設(shè)來把ES2015轉(zhuǎn)譯成ES5。

首先我們安裝這個(gè)預(yù)設(shè)：

$ npm install --save-dev babel-preset-es2015

然后在配置文件里添加這個(gè)預(yù)設(shè)：

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

最后我們再次運(yùn)行一次npm run build命令，再次打開lib/index.js文件，我們會(huì)看到代碼已經(jīng)被編譯成ES5的語法：

"use strict";

[1, 2, 3].map(function (n) {
  return n + 1;
});

像上面那段轉(zhuǎn)譯后的代碼我們可以直接使用在當(dāng)前的環(huán)境下，但是并不是所有轉(zhuǎn)譯后的文件我們都只能直接使用，因?yàn)殡m然Babel可以編譯目前幾乎所有的ES2015語法，但是一些新的API可能在當(dāng)前的Javascript環(huán)境下無法支持。例如下面的代碼（假設(shè)文件為lib/index.js）：

function addAll() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

轉(zhuǎn)譯后會(huì)變成：

function addAll() {
  return Array.from(arguments).reduce(function(a, b) {
    return a + b;
  });
}

可以看到語法上已經(jīng)轉(zhuǎn)譯成ES5了，但是并不是所有的Javascript環(huán)境都支持Array.from，例如我們在IE上運(yùn)行如下頁面：

可能會(huì)報(bào)以下的錯(cuò)誤：

對象不支持“from”屬性或方法

Babel的解決方法就是使用Polyfill技術(shù)（使用了core-js和regenerator），通過在當(dāng)前的運(yùn)行環(huán)境模擬不存在的API來達(dá)到使用新API的目的。

首先我們安裝babel-polyfill：

$ npm install --save babel-polyfill

注意這里使用的是--save而不是--save-dev，因?yàn)槲覀冃枰诖a里引入babel-polyfill。我們需要在文件頂部導(dǎo)入它：

import "babel-polyfill";

在添加這句代碼后，上面的代碼在轉(zhuǎn)譯后會(huì)變成下面這個(gè)樣子：

"use strict";

require("babel-polyfill");

function addAll() {
  return Array.from(arguments).reduce(function (a, b) {
    return a + b;
  });
}

因?yàn)锽abel編譯時(shí)默認(rèn)使用的是CommonJS的模塊規(guī)范，所以會(huì)看到轉(zhuǎn)譯后的代碼使用了require方法來加載babel-polyfill。這個(gè)在node環(huán)境下運(yùn)行沒有問題，但是在瀏覽器環(huán)境下運(yùn)行就會(huì)報(bào)錯(cuò)，因?yàn)闉g覽器目前還不原生的支持模塊的加載。那在瀏覽器下怎么使用babel-polyfill呢？

我們可以把babel-polyfill通過外部js的方式加載進(jìn)來，而不是在js代碼里進(jìn)行引入：

但是如果你打算在項(xiàng)目里使用模塊，上面明顯不是很好的解決方案。下面我們看看如果解決在瀏覽器環(huán)境下模塊的加載問題。

要在瀏覽器環(huán)境下加載依賴模塊，有很多方式，例如使用webpack或者browserify之類的打包工具（建議的方式，但是這里我們先不涉及）。或者我們可以使用瀏覽器端的模塊加載器進(jìn)行加載，例如我們使用AMD模塊規(guī)范進(jìn)行編譯，然后用RequireJS進(jìn)行加載。下面我使用SystemJS來做例子。

首先我們安裝es2015-modules-systemjs插件：

$ npm install babel-plugin-transform-es2015-modules-systemjs

然后修改配置文件，在plugins里添加插件：

{
  "plugins": ["transform-es2015-modules-systemjs"]
}

我們修改下lib/index.js，把addAll方法導(dǎo)出為模塊的方法：

import "babel-polyfill";

export function addAll() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

再次對文件進(jìn)行編譯，編譯后的lib/index.js變成這樣：

"use strict";

System.register(["babel-polyfill"], function (_export, _context) {
  "use strict";

  return {
    setters: [function (_babelPolyfill) {}],
    execute: function () {
      function addAll() {
        return Array.from(arguments).reduce(function (a, b) {
          return a + b;
        });
      }

      _export("addAll", addAll);
    }
  };
});

然后我們需要在HTML里引入system.js。由于SystemJS依賴于Promise，它會(huì)加載目錄下system-polyfills.js文件，所以我們需要確保這個(gè)文件的存在。在加載system.js后，我們就可以使用SystemJS進(jìn)行模塊的加載了：

出于性能的考慮，也可以用像Bluebird和es6-promise這樣的polyfill做替代，在system.js之前加載。

自此，我們學(xué)習(xí)到了Babel的一些基礎(chǔ)用法，包括安裝和運(yùn)行，以及配置和預(yù)設(shè)的用法，同時(shí)也初探了一些編譯后的文件的運(yùn)行問題。但是要用好Babel，還有很多問題需要繼續(xù)探討，期待我的下一篇筆記。

https://babeljs.io/
https://github.com/thejamesky...
https://github.com/systemjs/s...