摘要：入門什么是是一個廣泛使用的轉碼器，可以將代碼轉為代碼，從而在現有環境執行。

Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。

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

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

Preferences > Languages & Frameworks > JavaScript

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

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

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

sudo npm install -g babel-cli

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

Babel提供babel-cli工具，用于命令行轉碼。

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

安裝結果如下:

/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

安裝結果如下:

/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使用這個插件,要在項目根目錄創建一個.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的配置文件

創建好.babelrc ,并且配置好下面的配置:

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

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

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

以下是ruan大哥的樣例

# 轉碼結果輸出到標準輸出
$ babel example.js

# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib

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

現在是配置webstorm上的babel并且配置好自動執行babel

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

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

   配置項細則需要參考官網:[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

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

然后在你的index.html網頁文件調用這個index.js即可

備注:

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

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

參考引用:

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 語法支持設置