摘要：入門什么是是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將代碼轉(zhuǎn)為代碼，從而在現(xiàn)有環(huán)境執(zhí)行。

Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。

因?yàn)閑s6比es5的代碼更為適合編寫程序,但是因?yàn)闅v史的原因,現(xiàn)在普遍的瀏覽器并不支持es6代碼(普遍支持es5),即如果你寫es6代碼之后,在瀏覽器上運(yùn)行出錯(cuò),因?yàn)闉g覽器的javascript解析器無(wú)法解析es6代碼

因?yàn)槟J(rèn)webstorm并不支持es6語(yǔ)法,所以需要改改配置

Preferences > Languages & Frameworks > JavaScript

至此編寫es6的js已經(jīng)不會(huì)出現(xiàn)一大片紅色報(bào)錯(cuò)了,但是這個(gè)只是語(yǔ)法支持,并不能實(shí)際運(yùn)行在一般瀏覽器上,因?yàn)槟壳按蟛糠譃g覽器都不支持es6的語(yǔ)法,所以需要babel進(jìn)行轉(zhuǎn)換.

npm安裝可以參考其他文章,例如:https://segmentfault.com/a/1190000008463706

在mac下,需要sudo,全局安裝npm模塊babel-cli

sudo npm install -g babel-cli

babel會(huì)比較常用,所以使用全局方式安裝

Babel提供babel-cli工具，用于命令行轉(zhuǎn)碼。

babel有很多工具,但是我們目前只取其一,方便學(xué)習(xí)理解,也不容易混亂

安裝結(jié)果如下:

/usr/local/bin/babel-doctor -> /usr/local/lib/node_modules/babel-cli/bin/babel-doctor.js
/usr/local/bin/babel-node -> /usr/local/lib/node_modules/babel-cli/bin/babel-node.js
/usr/local/bin/babel -> /usr/local/lib/node_modules/babel-cli/bin/babel.js
/usr/local/bin/babel-external-helpers -> /usr/local/lib/node_modules/babel-cli/bin/babel-external-helpers.js

> fsevents@1.1.1 install /usr/local/lib/node_modules/babel-cli/node_modules/fsevents
> node install

[fsevents] Success: "/usr/local/lib/node_modules/babel-cli/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
/usr/local/lib

sudo npm install -g babel-preset-es2015

安裝結(jié)果如下:

/usr/local/lib
└─┬ babel-preset-es2015@6.22.0 
  ├─┬ babel-plugin-check-es2015-constants@6.22.0 
  │ └─┬ babel-runtime@6.23.0 
  │   ├── core-js@2.4.1 
  │   └── regenerator-runtime@0.10.3 
  ├── babel-plugin-transform-es2015-arrow-functions@6.22.0 
  ├── babel-plugin-transform-es2015-block-scoped-functions@6.22.0 
  ├─┬ babel-plugin-transform-es2015-block-scoping@6.23.0 
  │ ├─┬ babel-template@6.23.0 
  │ │ └── babylon@6.16.1 
  │ ├─┬ babel-traverse@6.23.1 
  │ │ ├─┬ babel-code-frame@6.22.0 
  │ │ │ ├─┬ chalk@1.1.3 
  │ │ │ │ ├── ansi-styles@2.2.1 
 ................
 

配置babel使用這個(gè)插件,要在項(xiàng)目根目錄創(chuàng)建一個(gè).babelrc,因?yàn)锽abel的配置文件是.babelrc,所有babel的配置都會(huì)在這里,而babel也會(huì)通過(guò)讀取這個(gè)文件的配置來(lái)進(jìn)行使用.

以下是我的項(xiàng)目目錄:

tree -L 1 -a
.
├── .babelrc  //babel配置文件在項(xiàng)目根目錄
├── index.html
├── index.js
├── lib
├── node_modules // npm的模塊的存放目錄
└── package.json //npm的package.json,相當(dāng)于npm的配置文件

創(chuàng)建好.babelrc ,并且配置好下面的配置:

{
//preset 就是預(yù)設(shè)的意思
  "presets": ["es2015"] //里面就只有一個(gè)配置項(xiàng),因?yàn)槲覀儸F(xiàn)在只簡(jiǎn)單使用,并且只使用一個(gè)插件,就是babel-preset-es2015
}

Babel 6不再默認(rèn)支持ES 2015，ES 2015，React，stage等都需要在.babelrc文件中進(jìn)行配置一個(gè)preset來(lái)實(shí)現(xiàn)預(yù)配置,babel主要是通過(guò)npm install babel-preset-env 這個(gè)插件來(lái)實(shí)現(xiàn)這個(gè)預(yù)配置的,而且默認(rèn)安裝babel-cli的時(shí)候已經(jīng)裝好了,所以可以直接使用presets,參考:http://babeljs.io/docs/plugins/preset-env/
babel-preset-es2015插件只是負(fù)責(zé)轉(zhuǎn)換es6的語(yǔ)法為es5,但是一些api功能是沒辦法轉(zhuǎn)換的,那時(shí)候要使用babel-polyfill,但那個(gè)是后話

關(guān)于babel命令行的用法已經(jīng)有很多人寫過(guò)了,這里不再闡述,只是隨便看看就好了,改用的時(shí)候再查

以下是ruan大哥的樣例

# 轉(zhuǎn)碼結(jié)果輸出到標(biāo)準(zhǔn)輸出
$ babel example.js

# 轉(zhuǎn)碼結(jié)果寫入一個(gè)文件
# --out-file 或 -o 參數(shù)指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整個(gè)目錄轉(zhuǎn)碼
# --out-dir 或 -d 參數(shù)指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 參數(shù)生成source map文件
$ babel src -d lib -s

現(xiàn)在是配置webstorm上的babel并且配置好自動(dòng)執(zhí)行babel

1.Preferences > Tools > File watchers點(diǎn)擊“+”按鈕添加babel的watcher,其實(shí)就是一個(gè)文件監(jiān)聽器,監(jiān)聽變化,自動(dòng)處理

    File Type：配置該監(jiān)聽器監(jiān)聽的文件類型,這里只編譯js文件
    
    Scope：配置該監(jiān)聽器的監(jiān)聽范圍，可自定義新的范圍，也可以使用Preferences > Appearance & Behavior > 
    Scopes 設(shè)置,這里只監(jiān)聽這個(gè)project的目錄
    
    Program：babel的安裝位置,這里我使用全局安裝的babel,所以是/usr/local開頭的
    
    Arguments：命令執(zhí)行參數(shù)，參見[Babel CLI](https://babeljs.io/docs/usage/cli/),但是這里webstorm一般已經(jīng)幫我們配置起碼能夠使用的參數(shù)了,暫時(shí)無(wú)需調(diào)整
    
    Output paths to refresh: 這里是babel編譯輸出的目錄,默認(rèn)webstorm幫我們配置好了會(huì)輸出source.map并且會(huì)在項(xiàng)目的上一層目錄創(chuàng)建一個(gè)dist目錄并且將編譯好的文件輸出到那里,例如下面的例子

   配置項(xiàng)細(xì)則需要參考官網(wǎng):[https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/](https://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/)

2.配置成功后,當(dāng)你修改的es6的js文件會(huì)自動(dòng)編譯出es5的文件

ls -1 dist/demo 
index.js
index.js.map

我的項(xiàng)目架構(gòu)現(xiàn)在是:這個(gè)就是webstorm默認(rèn)幫我配置好的
├── dist
│?? └── demo
│??     ├── index.js
│??     └── index.js.map
└── demo
    ├── .babelrc
    ├── index.html
    ├── index.js
    ├── lib
    ├── node_modules
    └── package.json

然后在你的index.html網(wǎng)頁(yè)文件調(diào)用這個(gè)index.js即可

備注:

關(guān)于webstorm上babel編譯后出現(xiàn)的source.map會(huì)引起webstorm的browser煩人的警告問題,需要在配置項(xiàng)里面勾選Allow unsigned requests配置

關(guān)于source.map文件怎么用,參考http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html,這里也只是大概了解一下下就好了,主要配置是//@ sourceMappingURL=jquery.min.map,能夠知道的是,使用這個(gè)source.map的話,可以知道編譯前后的代碼,從而可以調(diào)試,編譯前是es6但是實(shí)際瀏覽器運(yùn)行的是編譯后的es5,兩種代碼不一樣,如果沒有source.map的話,很難進(jìn)行調(diào)試的

參考引用:

Page "....js.map" requested without authorization, you can copy URL and open it in browser to trust it. WebStorm + FireBug

Babel 入門教程

ECMAScript 6 in WebStorm: Transpiling

WebStorm ES6 語(yǔ)法支持設(shè)置