說說babel

一.什麼是babel

二.如何配置

三.配置babel-polyfill

 

一.什麼是babel

The compiler for writing next generation JavaScript.

官網是這麼說的，翻譯一下就是下一代JavaScript 語法的編譯器。

因爲瀏覽器的版本和兼容性問題，不少JavaScript的新的方法都不能使用，等到能夠大膽使用的時候，可能已通過去了好幾年。Babel就所以而生，它可讓你放心使用大部分的JavaScript的新的標準的方法，而後編譯成兼容絕大多數的主流瀏覽器的代碼。在升級到了Babel6.x版本以後，全部的插件都是可插拔的。這也意味着你安裝了Babel以後，是不能工做的，須要配置對應的.babelrc文件才能發揮完整的做用。下面就對Babel的presets和plugins配置作一個簡單解析。

 

二.如何配置

1. 配置文件.babelrc

    Babel的配置文件是.babelrc，存放在項目的根目錄下。使用Babel的第一步，就是配置這個文件。

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

2.   presets字段設定轉碼規則，官方提供如下的規則集，你能夠根據須要安裝。

# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015

# react轉碼規則
$ npm install --save-dev babel-preset-react

# ES7不一樣階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

3.而後將這些規則加入.babelrc

{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}

4.其實看了上面的應該也明白了，presets，也就是一堆plugins的預設，起到方便的做用。若是你不採用presets，徹底能夠單獨引入某個功能，好比如下的設置就會引入編譯箭頭函數的功能。

{
"plugins": ["transform-es2015-arrow-functions"]
}
還有一些方法是presets中不提供的，這時候就須要單獨引入了，介紹幾個常見的插件。

transform-runtime
{
"plugins": ["transform-runtime", options]
}

主要有如下options選擇。

helpers: boolean，默認true
使用babel的helper函數。

polyfill: boolean，默認true
使用babel的polyfill，可是不能徹底取代babel-polyfill。

regenerator: boolean，默認true
使用babel的regenerator。

moduleName: string，默認babel-runtime
使用對應module處理。

 

transform-remove-console
{
"plugins": ["transform-remove-console"]
}
使用這個插件，編譯後的代碼都會移除console.*，媽媽不再用擔憂線上代碼有多餘的console.log了。固然不少時候，咱們若是使用webpack，會在webpack中配置。

 

5.Babel支持自定義的預設(presets)或插件(plugins)。若是你的插件在npm上，能夠直接採用這種方式"plugins": ["babel-plugin-myPlugin"]，固然，你也能夠縮寫，此外，你還能夠採用本地的相對路徑引入插件，好比"plugins": ["./node_modules/asdf/plugin"]。

presets同理，示例

{

  "presets": [

    "es2015",   //對應babel-preset-es2015

    "react",      //對應babel-preset-react

    "stage-0"   //對應babel-preset-stage-0

  ],

  "plugins": [

    "transform-decorators-legacy",  //對應babel-plugin-transform-decorators-legacy

    "transform-runtime",                  //對應babel-plugin-transform-runtime

  ]

}

6.最簡配置

{
"presets": [
"es2015",
"stage-0"
],
"plugins": ["transform-runtime"]
}

固然，若是你的項目須要react或者flow這些語法的編譯，請在presets里加入對應的值便可

 

三.babel-polyfill

babel默認只轉換新的javascript句法(syntax),而不轉換新的api，好比Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise,以及一些定義在全局對象上的方法（好比Object.assign）都不會轉碼。

舉例來講，ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。若是想讓這個方法運行，必須使用babel-polyfill，爲當前環境提供一個墊片。

安裝命令
$ npm install --save babel-polyfill

使用方式
1.require('babel-polyfill')
2.import 'babel-polyfill'
3.module.exports={
entry:["babel-polyfill","./app/js"]
}
第三種方式適用於使用webpack構建的同窗，加入到webpack配置文件
Babel默認不轉碼的API很是多，詳細清單能夠查看babel-plugin-transform-runtime模塊的definitions.js文件。

 

參考資料：https://excaliburhan.com/post/babel-preset-and-plugins.htmlhttps://www.jianshu.com/p/7bc7b0fadfc2http://www.ruanyifeng.com/blog/2016/01/babel.htmlhttps://www.cnblogs.com/liujb/p/BABEL-zhuan-ma-jie-huo.html#toc_2