前端系列——快速理解babel6配置過程

繁瑣的配置？

你能快速讀懂babel的官方文檔嗎？

你能根據官方文檔快速配置好babelrc嗎？

你能明白本身須要哪些插件嗎？

沒有搞明白這3個問題，請往下看。

快速理解babel 6

來看一張讓人顫抖的babel插件圖

下圖僅僅截取了部分，一屏都截取不完，還有babel插件隱藏在下面，你懼怕了嗎？

忘記上面的圖吧，那是罪惡之源

當你忘記一切的時候，你只須要理解幾個基本的東西便可。

只須要下面幾個babel插件，就能解析大部分ES方法

一、babel-core //必備的核心庫
二、babel-loader //webpack loader配置必備
三、babel-preset-env //有了它，你再也不須要添加201五、201六、2017，全都支持
四、babel-preset-stage-0 //有了它，你再也不須要添加stage-1,stage-2,stage-3,默認向後支持
五、babel-plugin-transform-runtime 
六、babel-runtime //5和6是一塊兒使用的，支持helpers，polyfill，regenerator配置

上面6大插件添加到package.json，即可完成一個普通開發者的需求了，那麼，若是是個react開發者，則還須要添加下面幾個插件

一、babel-plugin-transform-decorators-legacy //支持修飾符語法 @connect
二、babel-preset-react //支持解析react語法

若是你想要支持熱更新呢，還須要一個插件

一、react-hot-loader //雖然它長得不像babel，可是它也須要在babelrc作配置

其餘插件呢？
從個人感覺來看，上面這幾個插件的集合已經覆蓋了大部分ES語法了，若是是vue開發者，則把react的替換成vue。一般咱們再也不須要考慮其餘插件。

這些插件的具體版本號

請注意，babel插件一直在更新，至今已經出了babel7。而本章內容是介紹babel6，請不要亂用版本。

下面提供具體的版本號給你們參考

"babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "react-hot-loader": "^3.1.2",

你相信嗎？上面9個插件，就能生成圖片上那幾十個插件，這一切歸功於插件之間的依賴關係。

babelrc配置

如今，你只要考慮上面列舉的插件以及版本號，就能把babel快速配置出來了，至關簡單

{
  "presets": [
    "env",
    "react",
    "stage-0"
  ],
  "plugins": [
    ["transform-runtime", {
      "helpers": false, //建議爲false
      "polyfill": false, //是否開始polyfill，根據你的網站兼容性狀況來看，一般我不開啓，開啓會增長不少額外的代碼
      "regenerator": true //必須true，不然js就廢了
    }],
    "react-hot-loader/babel", //熱更新插件
    "transform-decorators-legacy" //修飾符語法轉換插件
  ]
}

webpack loader配置

babel-loader配置也至關簡單，至於react-hot-loader在webpack中的配置，請自行查看文檔。

module: {
        rules: [{
            test: /\.jsx?$/,
            use: 'babel-loader'
        }]
    }

總結

我始終相信，一個好的工程，應該儘可能用簡單的代碼去解決簡單的事情，而不是用複雜的代碼去解決簡單的事情。

不少人，包括我本身，在之前也常常被babel和webpack的配置搞的焦頭爛額，特別是babel，常常報這個插件的錯、那個插件的錯，有時候不知道少了什麼插件。

好了，如今不懼怕了，由於babel配置原來如此的簡單。