babel6 入門-配置安裝使用_byKL

babel6 入門

什麼是babel

• Babel是一個普遍使用的轉碼器，能夠將ES6代碼轉爲ES5代碼，從而在現有環境執行。

• 由於es6比es5的代碼更爲適合編寫程序,可是由於歷史的緣由,如今廣泛的瀏覽器並不支持es6代碼(廣泛支持es5),即若是你寫es6代碼以後,在瀏覽器上運行出錯,由於瀏覽器的javascript解析器沒法解析es6代碼

配置好webstorm的es6語法支持

由於默認webstorm並不支持es6語法,因此須要改改配置

Preferences > Languages & Frameworks > JavaScript

至此編寫es6的js已經不會出現一大片紅色報錯了,可是這個只是語法支持,並不能實際運行在通常瀏覽器上,由於目前大部分瀏覽器都不支持es6的語法,因此須要babel進行轉換.

配置好babel6的編譯器和插件

安裝npm

npm安裝能夠參考其餘文章,例如:http://www.javashuo.com/article/p-rxloxfzx-kp.html

安裝babel

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

sudo npm install -g babel-cli

1. babel會比較經常使用,因此使用全局方式安裝

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

3. 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

安裝babel轉爲es5的插件babel-preset-es2015

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,但那個是後話

使用babel6和es6

關於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便可

<script src="../dist/demo/index.js"></script>

備註:

1. 關於webstorm上babel編譯後出現的source.map會引發webstorm的browser煩人的警告問題,須要在配置項裏面勾選Allow unsigned requests配置

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

參考引用:

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

2. Babel 入門教程

3. ECMAScript 6 in WebStorm: Transpiling

4. WebStorm ES6 語法支持設置