ES6學習之Babel的正確安裝姿式（我已測，能夠在alt+F12命令行實時轉ES5）

本文介紹Babel6.x的安裝過程~

首先呢，可使用Babel在線轉換 https://babeljs.io/repl/

 

而後進入主題：安裝Babel（命令行環境，針對Babel6.x版本）

 

一、首先安裝babel-cli（用於在終端使用babel）  

　　npm install -g babel-cli

 

二、而後安裝babel-preset-es2015插件

　　npm install --save babel-preset-es2015

　　注：Babel5版本默認包含各類轉換插件，然而Babel6.x相關轉換插件須要本身下載，如transform-es2015-arrow-functions、transform-es2015-classes等，而ES2015 preset包含了全部插件。若是不安裝任何插件，那麼在命令行進行轉換是沒有任何效果的！

　　其中--save參數自動更新package.json文件，寫進依賴項

 

三、在命令行輸入：（默認webstorm 顯示終端 terminal 的快捷鍵 alt+f12）

　　babel es6.js --presets es2015

輸出：

　　"use strict";

　　[1, 2, 3].map(function (x) {
　　  return x * x;
　　});

　　注：後面的參數--presets es2015表示使用該插件進行編譯，若是不寫上轉換是沒有效果的。

　

四、插件配置

　　每一次都寫上該參數那是很麻煩的，能夠在當前目錄下新建配置文件 .babelrc。

　　可是在windows系統中，不容許直接右鍵創建沒有文件名的文件，能夠經過cmd命令行建立：在當前文件夾打開cmd並鍵入命令

　　type nul>.babelrc

　　便可在當前目錄下創建文件.babelrc，接着在文件中寫入：

　{
　　　"presets": ['es2015']
　}

　　那麼就能夠直接在命令行中使用babel es6.js進行轉換而無需添加代表所用插件的參數

 

　　除了創建.babelrc文件以外，也可在package.json中進行配置，添加如下屬性便可：

"babel": {
   　　"presets": ["es2015"]
  }

 

附Babel經常使用命令：

一、轉換es6.js文件並在當前命名行程序窗口中輸出

　　babel es6.js

 

二、將es6.js轉換後輸出到es5.js文件中（使用 -o 或 --out-file ）

　　babel es6.js -o es5.js 

　　babel es6.js --out-file es5.js

 

三、實時監控es6.js一有變化就從新編譯（使用 -w 或 --watch ）

　　babel es6.js -w --out-file es5.js

　　babel es6.js --watch --out-file es5.js

我：

四、編譯整個src文件夾並輸出到lib文件夾中（使用 -d 或 --out-dir ）

　　babel src -d lib

　　babel src --out-dir lib

 

五、編譯整個src文件夾並輸出到一個文件中

　　babel src --out-file es5.js

 

六、直接輸入babel-node命令，能夠在命令行中直接運行ES6代碼

　　babel-node