首先創(chuàng)建項(xiàng)目,確保該項(xiàng)目已經(jīng)安裝了webpack和webpack-dev-server具體安裝方法請(qǐng)參考上章所述.
在上一章說(shuō)過(guò)babel是一個(gè)javascript編輯器,在react項(xiàng)目中使用babel有以下兩個(gè)目的:
1:讓代碼支持ES6語(yǔ)法
2:支持react的一些特性(例如JSX語(yǔ)法)
針對(duì)以上兩個(gè)特性,有如下兩個(gè)presets可以完美解決
babel-preset-es2015 babel-preset-react
之前我們說(shuō)過(guò)webpack中的loader是用于文件特定格式的轉(zhuǎn)換,那么在這里我們就需要安裝Babel loader
//安裝babel-core核心模塊和babel-loader npm install babel-core babel-loader --save-dev //安裝ES6和React支持 npm install babel-preset-es2015 babel-preset-react --save-dev
babel安裝完成后,接下來(lái)要做的當(dāng)然是配置該插件了,讓我們新建一個(gè).babelrc的配置文件
{
"presets":["es2015","react"],
"plugins":["transform-object-rest-spread"]
}當(dāng)然這些當(dāng)然還不夠,在寫大型項(xiàng)目的時(shí)候一個(gè)統(tǒng)一的代碼規(guī)范是必須的,這樣有助于提高開(kāi)發(fā)效率,在這里給大家推薦一下ESLint,他的強(qiáng)大之處和babel有點(diǎn)相似,提供一個(gè)完全可配置的檢查規(guī)則,而且提供了非常多的第三方plugin,適合不同的開(kāi)發(fā)場(chǎng)所,還能輸出詳細(xì)的錯(cuò)誤信息,當(dāng)然最6的一點(diǎn)是它支持ES6最新語(yǔ)法的同時(shí)還支持JSX語(yǔ)法,所以說(shuō)他為React的絕配也不為過(guò).
一、安裝ESLint loader
同樣為webpack添加這個(gè)loader 當(dāng)然更準(zhǔn)確的說(shuō)是preloader 為什么這么說(shuō)呢 代碼規(guī)范檢查肯定是要在代碼編譯之前來(lái)執(zhí)行的,接下來(lái)就來(lái)安裝這個(gè)loader,同時(shí)eslint也提供了完整的代碼檢查規(guī)則plugin我們就一同安裝下
npm install eslint eslint-loader --save-dev npm install eslint-plugin-import esling-plugin-react eslint-plugin-jsx-a11y --save-dev npm install eslint-config-airbnb --save-dev
接下來(lái)我們來(lái)配置.eslintrc
延伸閱讀
學(xué)習(xí)是年輕人改變自己的最好方式