Babel在ES6項目架構中的搭建與應用方案解析

前言

自從ES2015發佈以來，所有的項目都轉到了這一個標準，但是考慮到兼容性的問題，不得不對現有代碼做一個轉換，也就是說將ES6規範的代碼轉換到ES5的標準，保證項目不存在任何問題的情況下運行，有人會問，這不是多此一舉嗎，但是我想說ES6給開發帶來的語法糖非常之多，足以吸引多數的技術決策者去嘗試，此規範也大大提高了項目的可維護性和規範性，個人非常推崇，並且在項目中的應用穩定性也很高，如果你還沒用使用，需要的話可以嘗試一下。

那麼今天就來詳細介紹一個babel在我的項目中的使用，其實babel從某種意義上來講推動了ES6標準的普及，讓更多的開發人員能第一時間在瀏覽器不完全兼容的情況下體驗這些完美的特性，Babel 是由插件組成，通過利用現有的插件或者開發你自己的插件可以組合出滿足我們自身需要的轉化管道。

Babel支持轉換語法有JSX， ES6。

今天我們主要講解一下如何在ES6項目架構中使用和架設Babel框架。

Babel命令安裝使用

$ npm install -g babel-cli

簡單解釋一下-g 是全局安裝，也可以用-global, 這樣方便我們全局使用。

對於很多js工具都有這個命令操作，比如gulp webpack grunt 等等。

配置文件.babelrc

配置文件其實就是決定了我們在項目如何使用這個工具，舉個例子比如gulp中gulpfile.js grunt中grunt.js等等。

所以Babel的配置文件是.babelrc，我們通常會把這個文件存放在項目的根目錄下。

該文件的格式通常來講是這個樣子的：

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

presets字段設定轉碼規則，官方提供以下的規則集，你可以根據需要安裝, 比如下面兩個規則，是我在項目中經常用到的。

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

爲了能讓兩個規則生效，需要安裝兩個依賴庫：

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

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

基本使用

我們正常轉換一個js文件：

$ babel myDemo.js

轉碼結果寫入一個文文件 –out-file 或 -o 參數指定輸出文件

$ babel myDemo.js --out-file myCompiled.js

或者，也可以用簡寫：

$ babel myDemo.js -o myCompiled.js

真正項目裏我們不可能一個一個文件轉換，所以需要整個目錄轉碼

$ babel src -d lib

-d 參數指定輸出目錄

babel-core的應用

很多時候我們都會結合gulp等構建工具進行使用，這時候我們需要安裝babel-core這個核心庫：

npm install babel-core --save

下面是幾個簡單的示例：

var es6Code = 'let myArray.map(item.name = 'Richard')';
var es5Code = require('babel-core')
  .transform(es6Code, {
    presets: ['es2015']
  })
  .code;

瀏覽器自動轉化代碼

其實我們也可以在瀏覽器中直接使用browser.js對代碼進行自動轉換，但是現實項目很少會這樣去做，因爲多少會影響前端的性能問題。

具體使用方法：

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

結合Gulp進行使用

通常在項目中，我們會應用到Gulp , Grunt， webpack這一類的構建工具，下面我們來介紹一下如何在gulp中使用babel：

首先我們需要安裝babelify:

sudo npm install babelify --save--only=dev

然後安裝browserify,對模塊化代碼進行整合：

sudo npm install browserify --save--only=dev

安裝preset:

sudo npm install babel-preset-es2015 --save--only=dev

整體代碼示例：

var browserify   = require('browserify');
var babelify     = require('babelify');
var es2015 = require('babel-preset-es2015');


 var bundler = browserify({
    entries: '//your js file path',
    debug: true,
    cache: {},
    packageCache: {},
    fullPaths: true
  });

var transform = babelify.configure({
      ignore:  'bower_components',
      presets: [es2015]
    });

bundler.transform(transform);

當然babel的使用還不止於此，希望藉此大家能不斷的去摸索一下！