babel 配置探究及錯誤解析

衆所周知react搭配es6或者叫es2015的開發模式更加的方便快捷。不過提到es2015這個畢竟沒有被瀏覽器普遍支持的規範，要想可以快快樂樂的應用起來，就少不了將將來將要被瀏覽器支持但如今支持還不全面的規範轉換成現有規範的工具了。這個好像選擇很少，是的好像就是babel了，關於babel，本文不會去涉及它內部的實現原理。由於最近在兼容新的react的時候，不可避免的涉及到babel的更新，開始被那一串配置搞的頭大，因此就認真的學習了一下，來跟你們分享一下。這裏的主要目的是babel的一些列配置文件的處理，因此關於babel的安裝之類的請猛戳babel官網。

　　關於babel的配置，主要是體如今項目根目錄下的.babelrc文件中。在babel6以前的版本還支持其餘的一些配置選項，更新以後babel配置文件只支持presets，plugins兩個參數。不向後兼容，因此其餘的參數是會報相似下面的錯誤：

　　ReferenceError: [BABEL] XXXX.jsx: Unknown option: stage(或loose)。

因此咱們全部的配置都是基於上面兩個參數上來配置的。二者差異能夠認爲presets指定的部分是babel集成好的插件集，能夠用來應對某一類問題例如es2015就是用來解析es2015用到的插件集。固然可能會有某些狀況是比較個例的，可能用到但大部分狀況下不會出現的插件，你就能夠在plugins中配置

　　1、presets：babel已經集成好的插件集。包括如下六種：

　　1）es2015: 處理es2015基本的語法，安裝對應語句：

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

　　2）react：主要用來處理react所用到的jsx語法等。安裝：

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

　　3）stage-0:主要處理do語句和bind方法。還包括stage-1,stage-2,stage-3的所有插件。　

1 /**
2 *文檔上這麼說，
3 *可是實際中在stage-0的node_modules中能夠發現只安裝了前兩個插件，
4 *而stage-1的node_modules中不只包含本身的插件還包含stage-2的插件
5 *因此stage-1仍是要安裝的.
6 **/

安裝：npm install npm install --save-dev babel-preset-stage-0

　　4）stage-1:包含如下插件：

• ransform-class-constructor-call: 處理es6中的構造函數
• transform-class-properties： 處理es6中的static屬性
• transform-decorators： 處理es7的裝飾着模式即@符號引入的方法
• transform-export-extensions: export方法的擴展

　　下面這兩種瞭解不深。。請大神指教。

　　還包括stage-2中的插件：

• syntax-trailing-function-commas
• transform-object-rest-spread

　　以及stage-3中的插件,用來處理generator函數和operator：

• transform-async-to-generator:
• transform-exponentiation-operator

     在babel的配置文件.babelrc中的配置寫法以下：

　　若是隻配置前兩項，你回發現你聲明的static 屬性，@裝飾器模式都會報錯。因此要依賴後兩項，按文檔的說法看來stage-0就能夠了，不過實際中處理裝飾器模式的插件仍是沒有的，依舊會報錯。因此二者都要依賴。不過看最新babel的文檔，已經拆分的比較細了，再也不是前面的包括後面的，命名就是根據不一樣時期的語法規範來命名了再也不是1，2，3了。而是統一es201X的方式了。此處線略過。

　　2、plugins：前面也提到了，presets是預設的插件集，固然都是有個例的存在，若是你須要單獨的某些插件的話，能夠在這裏配置。可能你會有疑問，前面presets看起來已經能夠包含基本狀況了吧，plugins還有用到的時候嗎？確定的說是有的，舉個可能都會碰到的狀況，

　　當你升級的react 15時，react-hot-loader必需要升級到3.X版本的，這個時候的react-hot-loader就必需要做爲插件的形式配置在.babelrc中了，而不是像原來那樣寫在webpack的loaders中。

　　還有一種狀況就是用到裝飾者模式的同窗，你仍是要單獨引入transform-decorators-legacy插件的。因此完整的適用於react 15的.babelrc的配置以下：

　　以上就是我對babel配置的一點了解了，拋磚引玉，共同進步。