Babel是一個廣泛使用的轉(zhuǎn)碼器壹店，它可以幫你實(shí)現(xiàn)以下操作：
- 它可以幫你將（ES6、ES7...）轉(zhuǎn)換為現(xiàn)瀏覽器支持的ES5芝加，這樣你就不用考慮新標(biāo)準(zhǔn)是否被瀏覽器識別了。
- 讓你能使用基于JavaScript進(jìn)行了拓展的語言，比如React的JSX藏杖。
1. 安裝
Babel其實(shí)是幾個模塊化的包将塑，其核心功能位于稱為babel-core的npm包中，webpack可以把其不同的包整合在一起使用蝌麸，對于每一個你需要的功能或拓展点寥，你都需要安裝單獨(dú)的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。
npm install --save-dev babel-core
npm install --save-dev babel-preset-env
npm install --save-dev babel-preset-react
安裝的依賴包是不是有點(diǎn)多来吩，需要npm安裝好多遍敢辩，當(dāng)然也不是必須要分開安裝，你完全可以多個依賴包一起安裝弟疆，這里要注意的是：“如果多個依賴包一起安裝那么每個依賴包之間需要用空格隔開”戚长，如下：
npm install --save-dev babel-core babel-preset-env babel-preset-react
本文以webpack文章的demo為例，如果未閱讀上文怠苔，并且想了解完整過程請點(diǎn)擊回到上文
2. 配置
先來看下在webpack.config.js文件中配置如下：
module.exports = {
...
module: { // 這里配置Bobal
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}
}
當(dāng)然這樣配置是完全沒錯的同廉，但是在正式項(xiàng)目中需要在webpack.config.js文件中配置很多項(xiàng)配置，這樣就使得這個文件有特別多配置柑司，從而使得這個配置文件會特別復(fù)雜迫肖，因此為了使這個文件配置變得稍微簡單點(diǎn)，一些開發(fā)者支持把babel的配置選項(xiàng)放在一個單獨(dú)的名為 ".babelrc" 的配置文件中攒驰，webpack會自動調(diào)用.babelrc里的babel配置選項(xiàng)蟆湖。
接下來我們在來修改配置文件
第一步 在項(xiàng)目根目錄創(chuàng)建.babelrc如下：
第二步 在
.babelrc中配置babel
{
"presets": ["react", "env"]
}
第三步 修改webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
},
exclude: /node_modules/
}
]
}
}
在配置Babel過程中大家有沒有注意到react，大家想到了什么玻粪，沒錯就是安裝react帐姻，我們要先安裝react才能用ES6以及JSX語法。
npm install --save react react-dom
接下來我們要用ES6語法
第四步 修改app.js奶段，讓他以組件形式返回
這個時候要注意了饥瓷，我們之前app.js文件名稱的開頭字母是小寫，這里我們要改為大寫痹籍，因?yàn)閞eact組件名稱是需要大寫的呢铆。
import React, {Component} from 'react'
import config from './config.json';
class App extends Component{
render(){
return (
<div>
{config[0].text}
</div>
)
}
}
export default App
修改main.js如下，使用ES6的模塊定義和渲染App模塊
import React from 'react';
import {render} from 'react-dom';
import App from './App';
render(<App />, document.getElementById('root'));
第五步 重新使用npm start打包蹲缠，并且使用npm run server啟動本地服務(wù)棺克，如果之前打開的本地服務(wù)器沒有關(guān)閉，你應(yīng)該可以在localhost:8080下看到與之前一樣的內(nèi)容线定，這說明react和es6被正常打包了娜谊。
