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

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

因為es6比es5的代碼更為適合編寫程序,但是因為歷史的原因,現(xiàn)在普遍的瀏覽器并不支持es6代碼(普遍支持es5),即如果你寫es6代碼之后,在瀏覽器上運行出錯,因為瀏覽器的javascript解析器無法解析es6代碼

因為默認webstorm并不支持es6語法,所以需要改改配置

Preferences > Languages & Frameworks > JavaScript

至此編寫es6的js已經(jīng)不會出現(xiàn)一大片紅色報錯了,但是這個只是語法支持,并不能實際運行在一般瀏覽器上,因為目前大部分瀏覽器都不支持es6的語法,所以需要babel進行轉(zhuǎn)換.

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

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

sudo npm install -g babel-cli

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

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

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

安裝結(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

> [email protected] 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
└─┬ [email protected] 
  ├─┬ [email protected] 
  │ └─┬ [email protected] 
  │   ├── [email protected] 
  │   └── [email protected] 
  ├── [email protected] 
  ├── [email protected] 
  ├─┬ [email protected] 
  │ ├─┬ [email protected] 
  │ │ └── [email protected] 
  │ ├─┬ [email protected] 
  │ │ ├─┬ [email protected] 
  │ │ │ ├─┬ [email protected] 
  │ │ │ │ ├── [email protected] 
 ................
 

配置babel使用這個插件,要在項目根目錄創(chuàng)建一個.babelrc,因為Babel的配置文件是.babelrc,所有babel的配置都會在這里,而babel也會通過讀取這個文件的配置來進行使用.

以下是我的項目目錄:

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

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

{
//preset 就是預(yù)設(shè)的意思
  "presets": ["es2015"] //里面就只有一個配置項,因為我們現(xiàn)在只簡單使用,并且只使用一個插件,就是babel-preset-es2015
}

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

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

以下是ruan大哥的樣例

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

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

# 整個目錄轉(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并且配置好自動執(zhí)行babel

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

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

   配置項細則需要參考官網(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.配置成功后,當你修改的es6的js文件會自動編譯出es5的文件

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

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

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

備注:

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

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