介紹

es6特性瀏覽器還沒(méi)有全部支持，但是使用es6是大勢(shì)所趨，所以babel應(yīng)運(yùn)而生，用來(lái)將es6代碼轉(zhuǎn)換成瀏覽器能夠識(shí)別的代碼
babel有提供專(zhuān)門(mén)的命令行工具方便轉(zhuǎn)碼，可以自行去了解

什么是Babel

官方解釋,是下一代JavaScript 語(yǔ)法的編譯器。

既然是下一代Javascript的標(biāo)準(zhǔn)，瀏覽器因版本的不同對(duì)此會(huì)有兼容性問(wèn)題，JavaScript的新的方法都不能使用，但是目前我們?cè)陧?xiàng)目開(kāi)發(fā)一直提倡使用最新的語(yǔ)法糖編寫(xiě)，不但能減少代碼量，而且async,await等新特性還解決了回調(diào)的編寫(xiě)機(jī)制，減輕了代碼維護(hù)成本。

Babel就因此而生，它可以讓你放心使用大部分的JavaScript的新的標(biāo)準(zhǔn)的方法，然后編譯成兼容絕大多數(shù)的主流瀏覽器的代碼。在項(xiàng)目工程腳手架中，一般會(huì)使用.babelrc文件，通過(guò)配置一些參數(shù)配合webpack進(jìn)行打包壓縮。也通過(guò)網(wǎng)上了解，寫(xiě)法各有不同，參數(shù)也大不相同，因此，我重新整理一份資料，詳細(xì)的介紹下各個(gè)配置項(xiàng)的意義所在，以便清晰了解如果使用。

以下配置主要正對(duì)webpack3+寫(xiě)法。

Babel轉(zhuǎn)譯器

在.babelrc配置文件中，主要是對(duì)預(yù)設(shè)（presets）和插件（plugins）進(jìn)行配置，因此不同的轉(zhuǎn)譯器作用不同的配置項(xiàng)，大致可分為以下三項(xiàng)：

1.語(yǔ)法轉(zhuǎn)義器。主要對(duì)javascript最新的語(yǔ)法糖進(jìn)行編譯，并不負(fù)責(zé)轉(zhuǎn)譯javascript新增的api和全局對(duì)象。例如let/const就可以被編譯，而includes/Object.assign等并不能被編譯。常用到的轉(zhuǎn)譯器包有，babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等。在實(shí)際開(kāi)發(fā)中可以只選用babel-preset-env來(lái)代替余下的，但是還需要配上javascirpt的制作規(guī)范一起使用，同時(shí)也是官方推薦

{ "presets": ["env", {   "modules": false  }],  "stage-2"}

2.補(bǔ)丁轉(zhuǎn)義器。主要負(fù)責(zé)轉(zhuǎn)譯javascript新增的api和全局對(duì)象，例如babel-plugin-transform-runtime這個(gè)插件能夠編譯Object.assign,同時(shí)也可以引入babel-polyfill進(jìn)一步對(duì)includes這類(lèi)用法保證在瀏覽器的兼容性。Object.assign 會(huì)被編譯成以下代碼：

3.jsx和flow插件，這類(lèi)轉(zhuǎn)譯器用來(lái)轉(zhuǎn)譯JSX語(yǔ)法和移除類(lèi)型聲明的，使用Rect的時(shí)候你將用到它，轉(zhuǎn)譯器名稱(chēng)為babel-preset-react

創(chuàng)建預(yù)設(shè)(presets)

主要通過(guò)npm安裝babel-preset-xx插件來(lái)配合使用，例如通過(guò) npm install babel-preset-stage-2 babel-preset-env --save-dev 安裝，會(huì)有相應(yīng)如下配置。

{ "presets": [  ["env", options],  "stage-2" ]}

stage-2配置

babel主要提供以下幾種轉(zhuǎn)義器包,括號(hào)里面是對(duì)應(yīng)配置文件的配置項(xiàng)

babel-preset-stage-0(stage-0) babel-preset-stage-1(stage-1) babel-preset-stage-2(stage-2) babel-preset-stage-3(stage-3)

不同階段的轉(zhuǎn)譯器之間是包含的關(guān)系，preset-stage-0轉(zhuǎn)譯器除了包含了preset-stage-1的所有功能還增加了transform-do-expressions插件和transform-function-bind插件，同樣preset-stage-1轉(zhuǎn)譯器除了包含preset-stage-2的全部功能外還增加了一些額外的功能。

options配置介紹

官方推薦使用babel-preset-env來(lái)替代一些插件包的安裝（es2015-arrow-functions，es2015-block-scoped-functions等等），并且有如下幾種配置信息,介紹幾個(gè)常用的，

更多配置可以參考官網(wǎng)https://babeljs.io/docs/plugins/preset-env/

{  "targets": {    "chrome": 52,    "browsers": ["last 2 versions", "safari 7"],    "node":"6.10"  }  "modules": false}

targets可以制定兼容瀏覽器版本，如果設(shè)置了browsers，那么就會(huì)覆蓋targets原本對(duì)瀏覽器的限制配置。

targets.node正對(duì)node版本進(jìn)行編譯

modules通常都會(huì)設(shè)置為false，因?yàn)槟J(rèn)都是支持CommonJS規(guī)范，同時(shí)還有其他配置參數(shù)："amd" | "umd" | "systemjs" | "commonjs"，systemjs我還不知道規(guī)范寫(xiě)法是什么，amd和umd以及commonjs相對(duì)比較熟悉，下面簡(jiǎn)要列舉下書(shū)寫(xiě)規(guī)范。

amd代碼規(guī)范，在ng1中會(huì)用到比較多，主要用于依賴注入：

define(['jquery'], function ($) {  //  方法  function myFunc(){};   //  暴露公共方法  return myFunc;})

commonjs規(guī)范，也是node環(huán)境中尊崇的一種規(guī)范：

var $ = require('jquery');//  方法function myFunc(){}; //  暴露公共方法（一個(gè)）module.exports = myFunc;{% endcodeblock %}>umd規(guī)范，兼容amd以及commonjs規(guī)范，目前在第三方插件編寫(xiě)使用比較多：{% codeblock lang:javascript %}(function (root, factory) {  if (typeof define === 'function' && define.amd) {    // AMD    define(['jquery'], factory);  } else if (typeof exports === 'object') {    // Node, CommonJS之類(lèi)的    module.exports = factory(require('jquery'));  } else {    // 瀏覽器全局變量(root 即 window)    root.returnExports = factory(root.jQuery);  }}(this, function ($) {  //  方法  function myFunc(){};   //  暴露公共方法  return myFunc;}));

插件（plugins）

插件配置項(xiàng)同預(yù)設(shè)配置項(xiàng)一樣，需要搭配babel相應(yīng)的插件進(jìn)行配置，可以選擇配置插件來(lái)滿足單個(gè)需求，例如早期我們會(huì)有如下配置：

{ "plugins": [  "check-es2015-constants",  "es2015-arrow-functions",  "es2015-block-scoped-functions",  // ... ]}

但是這些插件從維護(hù)到書(shū)寫(xiě)極為麻煩，后來(lái)官方統(tǒng)一推薦使用env，全部替代了這些單一的插件功能，可以簡(jiǎn)化配置如下，也就是我前面提到了babel-preset-env：

{ "presets": [  "es2015" ]}

這里主要介紹兩款常用插件，分別是babel-plugin-transform-runtime，babel-plugin-syntax-dynamic-import。

基本配置代碼如下：

{ "plugins": [  "syntax-dynamic-import",["transform-runtime"] ]}

transform-runtime

為了解決這種全局對(duì)象或者全局對(duì)象方法編譯不足的情況，才出現(xiàn)了transform-runtime這個(gè)插件，但是它只會(huì)對(duì)es6的語(yǔ)法進(jìn)行轉(zhuǎn)換，而不會(huì)對(duì)新api進(jìn)行轉(zhuǎn)換。如果需要轉(zhuǎn)換新api，也可以通過(guò)使用babel-polyfill來(lái)規(guī)避兼容性問(wèn)題。

對(duì)Object.assign進(jìn)行編譯，配置與未配置經(jīng)過(guò)webpack編譯后的代碼片段如下：

// 未設(shè)置代碼片段：__webpack_require__("ez/6");var aaa = 1;function fna() { var dd = 33333; var cc = Object.assign({ key: 2 }); var xx = String.prototype.repeat.call('b', 3); if ("foobar".String.prototype.includes("foo")) {  var vv = 1; } return dd;}// 設(shè)置代碼片段：/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign__);__webpack_require__("ez/6");var aaa = 1;function fna() { var dd = 33333; var cc = __WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default()({ key: 2 }); var xx = String.prototype.repeat.call('b', 3); if ("foobar".String.prototype.includes("foo")) {  var vv = 1; } return dd;}

對(duì)class定義類(lèi)會(huì)進(jìn)行編譯，配置與未配置經(jīng)過(guò)webpack編譯后的代碼片段如下：

// 未設(shè)置代碼片段：function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }var Canvas = function Canvas(height, width) { _classCallCheck(this, Canvas); this.height = height; this.width = width;};var Canvas2 = function Canvas2(height, width) { _classCallCheck(this, Canvas2); this.height = height; this.width = width;};

// 設(shè)置代碼片段：/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck__);var Canvas = function Canvas(height, width) { __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, Canvas); this.height = height; this.width = width;};var Canvas2 = function Canvas2(height, width) { __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, Canvas2); this.height = height; this.width = width;};

對(duì)Generator函數(shù)也有同上的編譯效果，目前項(xiàng)目中使用該函數(shù)較小，一般使用promise替代，以及async await所以未對(duì)該函數(shù)做測(cè)試。

官方說(shuō)對(duì)promise也會(huì)產(chǎn)生編譯，但是實(shí)際測(cè)試結(jié)果卻沒(méi)有效果

經(jīng)過(guò)webpack打包最終測(cè)試，引入transform-runtime該配置項(xiàng)后，打包入口js文件大小會(huì)略微增大，并不像官方說(shuō)的能夠縮小文件體積

未配置的最終打包效果：

配置后的最終打包效果：

雖然文件大小會(huì)有所增大，但是解決一些兼容性的問(wèn)題，同時(shí)，從以上給出的測(cè)試代碼例子來(lái)看，使用transform-runtime后，可以減少內(nèi)部全局函數(shù)的定義，從結(jié)構(gòu)上看尊崇了webpack的模塊化思想，所以還是建議使用該插件。

syntax-dynamic-import

這個(gè)插件主要解決動(dòng)態(tài)引入模塊的問(wèn)題

function nDate() { import('moment').then(function(moment) {  console.log(moment().format()); }).catch(function(err) {  console.log('Failed to load moment', err); });}nDate();

如果.babelrc配置項(xiàng)中使用了"stage-2"，也可以不實(shí)用該插件，同樣支持動(dòng)態(tài)模塊引入。

不然就會(huì)報(bào)以下錯(cuò)誤：

1. Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level, or (import 和 export只能在最外層，也就是不能用在函數(shù)或者塊中)
2. Module build failed: SyntaxError: Unexpected token, expected {

其他配置項(xiàng)

ignore

主要作用就是可以指定不編譯那些代碼

{ "ignore":["./module/a.js"]}

let,Object.assign,class定義都未編譯，編譯效果如下：

__webpack_require__("ez/6");const aaa = 1;function fna () { let dd = 33333 let cc = Object.assign({key:2}) let xx = String.prototype.repeat.call('b', 3) if ("foobar".String.prototype.includes("foo")) {  let vv = 1 } return dd}function fna2 () { return fna() + aaa + __WEBPACK_IMPORTED_MODULE_0__b__["a" /* default */]}class Canvas { constructor(height, width) {  this.height = height;  this.width = width; }}class Canvas2 { constructor(height, width) {  this.height = height;  this.width = width; }}

minified

主要設(shè)置編譯后是否是壓縮，boolean類(lèi)型，如果使用babel-cli進(jìn)行打包編譯文件這個(gè)配置項(xiàng)能夠起到作用，但是目前大部分還是會(huì)依賴第三方打包工具，例如webpack，所以這個(gè)配置參數(shù)一般不用設(shè)置，webpack插件中的UglifyJsPlugin做了壓縮的工作。

comments

在生成的文件中，不產(chǎn)生注釋?zhuān)琤oolean類(lèi)型，webpack插件中的UglifyJsPlugin也同樣集成了這個(gè)功能。

env

基本配置如下：

{ "env": {  // test 是提前設(shè)置的環(huán)境變量，如果沒(méi)有設(shè)置BABEL_ENV則使用NODE_ENV，如果都沒(méi)有設(shè)置默認(rèn)就是development  "test": {   "presets": ["env", "stage-2"],   // instanbul是一個(gè)用來(lái)測(cè)試轉(zhuǎn)碼后代碼的工具   "plugins": ["istanbul"]  } }}

再談兼容性問(wèn)題

Babel默認(rèn)只轉(zhuǎn)換新的JavaScript語(yǔ)法，而不轉(zhuǎn)換新的API，比如Iterator、Generator、Set、Maps、Promise等等全局對(duì)象，以及一些定義在全局對(duì)象上的方法（比如Object.assign）都不會(huì)轉(zhuǎn)碼，具體的可以參考babel-plugin-transform-runtime模塊的 definitions.js 文件。

這里主要涉及到babel編譯后依然會(huì)存在瀏覽器兼容性問(wèn)題，一般會(huì)使用transform-runtime和babel-polyfill配合使用，對(duì)于后者只需要在項(xiàng)目入口文件require引入即可。

當(dāng)然在使用類(lèi)似Object.assign函數(shù)功能時(shí)，可以使用lodash庫(kù)來(lái)替代，promise可以使用Q.js替代等等方案，這樣依賴可以不需要引入以上插件，具體可以根據(jù)項(xiàng)目具體安排

總結(jié)

.babelrc配置文件主要還是以presets和plugins組成，通過(guò)和webpack配合進(jìn)行使用，分享下我們?cè)陧?xiàng)目中常用的配置。以上都是通過(guò)學(xué)習(xí)總結(jié)出來(lái)的，有什么不對(duì)的地方希望指出。

vue項(xiàng)目開(kāi)發(fā)使用的配置如下：

{ "presets": [  ["env", {   "modules": false  }],  "stage-2" ], // 下面指的是在生成的文件中，不產(chǎn)生注釋 "comments": false, "plugins": ["transform-runtime","syntax-dynamic-import"], "env": {  // test 是提前設(shè)置的環(huán)境變量，如果沒(méi)有設(shè)置BABEL_ENV則使用NODE_ENV，如果都沒(méi)有設(shè)置默認(rèn)就是development  "test": {   "presets": ["env", "stage-2"],   // instanbul是一個(gè)用來(lái)測(cè)試轉(zhuǎn)碼后代碼的工具   "plugins": ["istanbul"]  } }}

react項(xiàng)目開(kāi)發(fā)使用的配置如下：

{ "presets": [  ["env", { "modules": false }],  "stage-2",  "react" ], "plugins": ["transform-runtime"], "comments": false, "env": {  "test": {   "presets": ["env", "stage-2"],   "plugins": [ "istanbul" ]  } }}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。