Babel 入門教程

這意味着，你可以現在就用es6編寫程式，而不用擔心現有環境是否支援。下面是一個例子。

上面的原始代碼用了箭頭函數，這個特性還沒有得到廣泛支援，babel将其轉為普通函數，就能在現有的javascript環境執行了。

babel的配置檔案是<code>.babelrc</code>，存放在項目的根目錄下。使用babel的第一步，就是配置這個檔案。

該檔案用來設定轉碼規則和插件，基本格式如下。

<code>presets</code>字段設定轉碼規則，官方提供以下的規則集，你可以根據需要安裝。

然後，将這些規則加入<code>.babelrc</code>。

注意，以下所有babel工具和子產品的使用，都必須先寫好<code>.babelrc</code>。

babel提供<code>babel-cli</code>工具，用于指令行轉碼。

它的安裝指令如下。

基本用法如下。

上面代碼是在全局環境下，進行babel轉碼。這意味着，如果項目要運作，全局環境必須有babel，也就是說項目産生了對環境的依賴。另一方面，這樣做也無法支援不同項目使用不同版本的babel。

一個解決辦法是将<code>babel-cli</code>安裝在項目之中。

然後，改寫<code>package.json</code>。

轉碼的時候，就執行下面的指令。

<code>babel-cli</code>工具自帶一個<code>babel-node</code>指令，提供一個支援es6的repl環境。它支援node的repl環境的所有功能，而且可以直接運作es6代碼。

它不用單獨安裝，而是随<code>babel-cli</code>一起安裝。然後，執行<code>babel-node</code>就進入pepl環境。

<code>babel-node</code>指令可以直接運作es6腳本。将上面的代碼放入腳本檔案<code>es6.js</code>，然後直接運作。

<code>babel-node</code>也可以安裝在項目中。

上面代碼中，使用<code>babel-node</code>替代<code>node</code>，這樣<code>script.js</code>本身就不用做任何轉碼處理。

<code>babel-register</code>子產品改寫<code>require</code>指令，為它加上一個鈎子。此後，每當使用<code>require</code>加載<code>.js</code>、<code>.jsx</code>、<code>.es</code>和<code>.es6</code>字尾名的檔案，就會先用babel進行轉碼。

使用時，必須首先加載<code>babel-register</code>。

然後，就不需要手動對<code>index.js</code>轉碼了。

需要注意的是，<code>babel-register</code>隻會對<code>require</code>指令加載的檔案轉碼，而不會對目前檔案轉碼。另外，由于它是實時轉碼，是以隻适合在開發環境使用。

如果某些代碼需要調用babel的api進行轉碼，就要使用<code>babel-core</code>子產品。

安裝指令如下。

然後，在項目中就可以調用<code>babel-core</code>。

下面是一個例子。

上面代碼中，<code>transform</code>方法的第一個參數是一個字元串，表示需要轉換的es6代碼，第二個參數是轉換的配置對象。

babel預設隻轉換新的javascript句法（syntax），而不轉換新的api，比如iterator、generator、set、maps、proxy、reflect、symbol、promise等全局對象，以及一些定義在全局對象上的方法（比如<code>object.assign</code>）都不會轉碼。

舉例來說，es6在<code>array</code>對象上新增了<code>array.from</code>方法。babel就不會轉碼這個方法。如果想讓這個方法運作，必須使用<code>babel-polyfill</code>，為目前環境提供一個墊片。

然後，在腳本頭部，加入如下一行代碼。

babel也可以用于浏覽器環境。但是，從babel 6.0開始，不再直接提供浏覽器版本，而是要用建構工具建構出來。如果你沒有或不想使用建構工具，可以通過安裝5.x版本的<code>babel-core</code>子產品擷取。

運作上面的指令以後，就可以在目前目錄的<code>node_modules/babel-core/</code>子目錄裡面，找到<code>babel</code>的浏覽器版本<code>browser.js</code>（未精簡）和<code>browser.min.js</code>（已精簡）。

然後，将下面的代碼插入網頁。

上面代碼中，<code>browser.js</code>是babel提供的轉換器腳本，可以在浏覽器運作。使用者的es6腳本放在<code>script</code>标簽之中，但是要注明<code>type="text/babel"</code>。

注意，網頁中實時将es6代碼轉為es5，對性能會有影響。生産環境需要加載已經轉碼完成的腳本。

下面是如何将代碼打包成浏覽器可以使用的腳本，以<code>babel</code>配合<code>browserify</code>為例。首先，安裝<code>babelify</code>子產品。

然後，再用指令行轉換es6腳本。

上面代碼将es6腳本<code>script.js</code>，轉為<code>bundle.js</code>，浏覽器直接加載後者就可以了。

在<code>package.json</code>設定下面的代碼，就不用每次指令行都輸入參數了。

許多工具需要babel進行前置轉碼，這裡舉兩個例子：eslint和mocha。

然後，在項目根目錄下，建立一個配置檔案<code>.eslint</code>，在其中加入<code>parser</code>字段。

再在<code>package.json</code>之中，加入相應的<code>scripts</code>腳本。

上面指令中，<code>--compilers</code>參數指定腳本的轉碼器，規定字尾名為<code>js</code>的檔案，都需要使用<code>babel-core/register</code>先轉碼。

（完）