Babel使用

 

一、Babel

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

2.3.一、配置環境

安裝babel命令行工具：

npm install --global babel-cli

安裝成功後可使用babel -V查看版本，可使用babel -help 查看幫助

建立項目，在當前項目中依賴babel-core

假定當前項目的目錄爲：E:\Desktop-temp\xww\FastResponse\Mobile\Hybird\vue2_01\vue07_03_babel

使用npm init能夠初始化當前項目爲node項目

npm install babel-core --save

依賴插件babel-preset-es2015

若是想使用es6語法，必須安裝一個插件

npm install babel-preset-es2015

而後在文件夾下面建立一個叫.babelrc的文件，並寫入以下代碼：

{
"presets": ["es2015"]
}

windows不支持直接命令爲.babelrc，能夠在DOS下使用@echo結合>實現：

.babelrc文件以rc結尾的文件一般表明運行時自動加載的文件，配置等等的，相似bashrc,zshrc。一樣babelrc在這裏也是有一樣的做用的，並且在babel6中，這個文件必不可少。
在babel6中，預設了6種，分別是：es201五、stage-0、stage-一、stage-二、stage-三、react

2.3.二、轉換ES6爲ES5

當環境準備好了，就能夠編寫一個es6風格的文件如：es6.js，內容以下：

let add=(x,y)=>x+y;
const n1=100,n2=200;
var result=add(n1,n2);
console.log(result);

在當前目錄執行命令：

babel es6.js -o es5.js

轉換後的結果es5.js：

"use strict";

var add = function add(x, y) {
  return x + y;
};
var n1 = 100,
    n2 = 200;
var result = add(n1, n2);
console.log(result);

從轉換後的結果能夠看出es6已變成es5了，箭頭函數不見了。 

2.3.三、使用babel-node運行ES6模塊化代碼

babel-cli工具自帶一個babel-node命令，提供一個支持ES6的REPL環境。它支持Node的REPL（交互式解釋器環境）環境的全部功能，並且能夠直接運行ES6代碼。

在當前目錄下建立lib.js文件：

/**
 *定義模塊
 */
//導出
export let msg="求和：";
export function sum(n){
    let total=0;
    for(var i=1;i<=n;i++){
        total+=i;
    }
    return total;
}

建立main.js文件調用定義好的模塊：

/**
 * 使用模塊
 */
//導入
import { sum, msg } from './lib.js';
let result = sum(100);
console.log(msg + "" + result);

在命令行執行：babel-node main.js 結果以下：

到這裏共講解了3種能夠運行ES6模塊化的環境，任選一種能夠用於學習。