1.babel是什么
babel是一個(gè)javascript轉(zhuǎn)譯器。為什么會(huì)有babel存在呢？原因是javascript在不斷的發(fā)展，但是瀏覽器的發(fā)展速度跟不上。以es6為例，es6中為javascript增加了箭頭函數(shù)、塊級(jí)作用域等新的語法和Symbol、Promise等新的數(shù)據(jù)類型，但是這些語法和數(shù)據(jù)類型并不能夠馬上被現(xiàn)在的瀏覽器全部支持，為了能在現(xiàn)有的瀏覽器上使用js新的語法和新的數(shù)據(jù)類型，就需要使用一個(gè)轉(zhuǎn)譯器，將javascript中新增的特性轉(zhuǎn)為現(xiàn)代瀏覽器能理解的形式。babel就是做這個(gè)方面的轉(zhuǎn)化工作。
2, babel使用
在本地磁盤上創(chuàng)建一個(gè)文件夾es6（名字任意），在該文件夾下打開命令行工具，初始化項(xiàng)目。
F:\es6>npm init -y
這個(gè)命令目的就是創(chuàng)建一個(gè)默認(rèn)的package.json文件
本地安裝babel命令行工具
安裝babel的命令行工具的目的是為了在命令行使用babel。
babel命令行工具可以全局安裝也可以本地安裝，官方文檔推薦本地安裝，原因有2點(diǎn)；
1.本地安裝不同的項(xiàng)目可以使用不同版本的babel，你也可以單獨(dú)對(duì)某個(gè)項(xiàng)目的babel進(jìn)行升級(jí)等操作
2.每個(gè)項(xiàng)目單獨(dú)安裝的意味著對(duì)計(jì)算機(jī)環(huán)境沒有依賴，便于移植
在命令行中繼續(xù)執(zhí)行如下命令
npm install --save-dev babel-cli
這樣就已經(jīng)在本地安裝好babel了。
此時(shí)我的package.json文件如下
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
}
}在命令行中調(diào)用babel
本地安裝的babel是不能夠在直接命令行中運(yùn)行的，為了在命令行中運(yùn)行babel，我們有兩個(gè)方法，
是需要配置下package.json文件的scripts項(xiàng)。比如如下代碼，配置了一個(gè)build命令，運(yùn)行該命令(npm run build)的時(shí)候就會(huì)在命令行執(zhí)行babel src -d lib
{ "name": "es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "babel src -d lib" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.26.0", } }
第2個(gè)方法是你需要可以進(jìn)入node_modules文件夾，再進(jìn)入.bin文件夾，然后執(zhí)行在命令行中執(zhí)行babel src -d lib。
推薦使用npm run build的方法。
這里需要解釋babel src -d lib這個(gè)命令的意思。這個(gè)命令目的是把src文件夾下的文件都轉(zhuǎn)譯，轉(zhuǎn)譯后的文件放到lib目錄下。
ps:此時(shí)無論你是運(yùn)行npm run build 還是運(yùn)行babel src -d lib命令（其實(shí)兩個(gè)方法本質(zhì)上都是一樣的，都是運(yùn)行babel src -d lib）命令行都會(huì)報(bào)錯(cuò)，原因是現(xiàn)在還沒有src文件夾?？梢韵炔挥霉芩?，稍后我們?cè)傩陆╯rc文件夾。
創(chuàng)建.babelrc配置文件
在cmd中鍵入以下命令
type nul>.babelrc
這個(gè)時(shí)候你的文件夾里就多了一個(gè).babelrc文件了。windows是不能直接創(chuàng)建空文件名的文件的，所以必須通過命令行創(chuàng)建。
安裝babel的轉(zhuǎn)譯器
這里我們以babel-preset-latest為例。
在命令行中執(zhí)行如下代碼就會(huì)安裝babel-preset-latest轉(zhuǎn)譯器。
# 最新轉(zhuǎn)碼規(guī)則 npm install --save-dev babel-preset-latest
注意：babel命令行工具（babel-cli）跟babel轉(zhuǎn)譯器是兩個(gè)不同的東西，命令行工具并不具有轉(zhuǎn)譯代碼的功能，只是為了在命令行中使用babel。要轉(zhuǎn)碼必須安裝轉(zhuǎn)譯器，比如babel-preset-latest轉(zhuǎn)譯器或者babel-preset-react轉(zhuǎn)譯器。要轉(zhuǎn)譯的時(shí)候，還要在.babelrc文件或者命令行中配置這些轉(zhuǎn)譯器(presets)選項(xiàng)
配置.babelrc文件
.babelrc用于配置除回調(diào)以外的所有babel api 選項(xiàng)。例如plugins和presets。plugins用于配置我們轉(zhuǎn)譯所需要的插件，presets用于配置我們所需要的轉(zhuǎn)譯器。
.babelrc不是必須的，我們?cè)?babelrc中配置的選項(xiàng)都可以通過命令行添加，比如在命令行執(zhí)行 babel src -d lib --presets=latest等價(jià)于在.babelrc中配置 "presets":["latest"]。當(dāng)然.babelrc要明顯方便很多。
babel在轉(zhuǎn)譯代碼的過程中會(huì)自動(dòng)讀取當(dāng)前目錄.babelrc配置文件，如果當(dāng)前目錄沒有的話就遍歷整個(gè)目錄樹去尋找，直到找到.babelrc文件或者含有"babel"字段的package.json文件，然后使用這些配置選項(xiàng)來轉(zhuǎn)譯代碼。
1、如果沒有.babelrc文件，或者沒有在其他文件中設(shè)置過babel的presets的配置選型，并且命令行中也沒有配置–presets，那么代碼是不會(huì)轉(zhuǎn)譯的。原es6代碼什么樣，轉(zhuǎn)譯后的代碼還是什么樣。
2、如果你的.babelrc或者你的命令行使用了你沒有安裝的轉(zhuǎn)譯器（presets），代碼就會(huì)報(bào)錯(cuò)
3、但.babelrc中的配置跟你在命令行中使用的配置沖突的時(shí)候，以.babelrc中的配置為準(zhǔn)
{
"presets":[
"latest"
],
"plugins":[]
}babelrc的替代方案
如果你不想生成.babelrc文件，你可以在你的package.json文件中對(duì)babel進(jìn)行配置。如果你使用gulp或者webpack之類的管理工具的話，也可以在這里工具的配置選項(xiàng)里添加babel的配置選項(xiàng)。
以下以在package.json中配置為例。
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "arrow.js",
"scripts": {
"build": "babel src -d lib --comments=true"
},
"babel":{
//babel選項(xiàng)
"presets":["es2015"],
"comments":false
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.2.0"
}
}在package.json中配置babel等同于使用.babelrc文件
編寫es6代碼
在當(dāng)前目錄分別建設(shè)src和lib文件夾
在src下面新建arrow.js文件, 內(nèi)容如下:
input.map(item => item + 1);
轉(zhuǎn)譯es代碼
執(zhí)行命令: npm run build
看lib文件下, 生成了 arrow.js文件, 內(nèi)容如下:
"use strict";
input.map(function (item) {
return item + 1;
});經(jīng)過上面的步驟我們已經(jīng)完成了轉(zhuǎn)譯代碼的工作
