隨著es6,es7,es8等新標準的出現，我們在項目中為了更好的體驗和使用這些新特性，但是在瀏覽器中又不能直接運行，所以我們就需要一個環(huán)境來將代碼編譯成瀏覽器可以運行的代碼，這就需要用到babel來編譯。
這個目錄也可以作為平時練習es6等新特性的開發(fā)體驗目錄。前提是你已經安裝了node環(huán)境。
一：新建目錄（babel-compile-es6）(windows系統(tǒng))
mkdir babel-compile-es6
cd babel-compile-es6
npm init
二：安裝babel環(huán)境依賴
npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
三：新建.babelrc文件
文件里面寫入如下代碼：
{
"presets":["es2015","latest"],
"plugins":[]
}
四：全局安裝babel-cli命令行
npm install -g babel-cli
babel --version
五：運行babel命令，編譯文件
新建一個es6語法的js文件
//es6-module/util.js
const firstFun = () => {
console.log('i am first es6 module');
}
const mapArr = [1,2,3];
const mapFun = () => {
const result = mapArr.map(item => item + 1);
console.log(result);
}
firstFun();
mapFun();
運行babel命令：
babel ./es6-module/util.js
運行結果如下：
可以看到代碼被編譯成了es5標準的代碼。
六：最后我們在瀏覽器中跑一下看看效果
我們需要將編譯的代碼輸出到一個文件里面，然后在html中引入即可。
新建一個compiled文件夾來放編譯之后的文件。
編譯util.js到compiled文件下
babel ./es6-module/util.js --out-file ./compiled/compiled-util.js
可以看到compiled文件夾下出現了一個compiled-util.js文件
最后html文件引入，然后瀏覽器運行一下：
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>babel compile es6 test</title>
</head>
<body>
babel compile es6 test
<script type="text/javascript" src="compiled/compiled-util.js"></script>
</body>
</html>
控制臺打印結果如下：
