隨著es6,es7,es8等新標(biāo)準(zhǔn)的出現(xiàn)摄狱，我們?cè)陧?xiàng)目中為了更好的體驗(yàn)和使用這些新特性桃焕，但是在瀏覽器中又不能直接運(yùn)行瓶盛，所以我們就需要一個(gè)環(huán)境來將代碼編譯成瀏覽器可以運(yùn)行的代碼惯疙，這就需要用到babel來編譯钱床。
這個(gè)目錄也可以作為平時(shí)練習(xí)es6等新特性的開發(fā)體驗(yàn)?zāi)夸浖运埂Ｇ疤崾悄阋呀?jīng)安裝了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
五：運(yùn)行babel命令查牌，編譯文件
新建一個(gè)es6語(yǔ)法的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();
運(yùn)行babel命令：
babel ./es6-module/util.js
運(yùn)行結(jié)果如下：
可以看到代碼被編譯成了es5標(biāo)準(zhǔn)的代碼事期。
六：最后我們?cè)跒g覽器中跑一下看看效果
我們需要將編譯的代碼輸出到一個(gè)文件里面，然后在html中引入即可纸颜。
新建一個(gè)compiled文件夾來放編譯之后的文件兽泣。
編譯util.js到compiled文件下
babel ./es6-module/util.js --out-file ./compiled/compiled-util.js
可以看到compiled文件夾下出現(xiàn)了一個(gè)compiled-util.js文件
最后html文件引入，然后瀏覽器運(yùn)行一下：
//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>
控制臺(tái)打印結(jié)果如下：
