首先創(chuàng)建項(xiàng)目,確保該項(xiàng)目已經(jīng)安裝了webpack和webpack-dev-server具體安裝方法請參考上章所述.
在上一章說過babel是一個javascript編輯器,在react項(xiàng)目中使用babel有以下兩個目的:
1:讓代碼支持ES6語法
2:支持react的一些特性(例如JSX語法)
針對以上兩個特性,有如下兩個presets可以完美解決
babel-preset-es2015 babel-preset-react
之前我們說過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安裝完成后,接下來要做的當(dāng)然是配置該插件了,讓我們新建一個.babelrc的配置文件
{
"presets":["es2015","react"],
"plugins":["transform-object-rest-spread"]
}當(dāng)然這些當(dāng)然還不夠,在寫大型項(xiàng)目的時候一個統(tǒng)一的代碼規(guī)范是必須的,這樣有助于提高開發(fā)效率,在這里給大家推薦一下ESLint,他的強(qiáng)大之處和babel有點(diǎn)相似,提供一個完全可配置的檢查規(guī)則,而且提供了非常多的第三方plugin,適合不同的開發(fā)場所,還能輸出詳細(xì)的錯誤信息,當(dāng)然最6的一點(diǎn)是它支持ES6最新語法的同時還支持JSX語法,所以說他為React的絕配也不為過.
一、安裝ESLint loader
同樣為webpack添加這個loader 當(dāng)然更準(zhǔn)確的說是preloader 為什么這么說呢 代碼規(guī)范檢查肯定是要在代碼編譯之前來執(zhí)行的,接下來就來安裝這個loader,同時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
接下來我們來配置.eslintrc
