快速搭建 React + webpack + ES6 項(xiàng)目

本 react 項(xiàng)目結(jié)合 babel 和 webpack-dev-server,可以轉(zhuǎn)譯所編寫(xiě)的ES6代碼并且實(shí)現(xiàn)實(shí)時(shí)刷新,拯救你的 F5。

1,下載方法(本文中默認(rèn)cmd定位到項(xiàng)目根目錄)

1)復(fù)制我的項(xiàng)目地址git@github.com:Distribia/react.git,然后在你的項(xiàng)目根目錄打開(kāi)你的cmd,在命令行中輸入git clone git@github.com:Distribia/react.git,等待幾分鐘后會(huì)自動(dòng)把項(xiàng)目文件下載下來(lái),文件名叫‘react’;

2)然后將‘react’文件里的所有文件剪切到你的項(xiàng)目的根文件下,然后刪掉‘react’文件夾;

3)將命令行定位到你項(xiàng)目的根目錄,輸入npm install,然后程序?qū)⒆詣?dòng)下載項(xiàng)目所依賴(lài)的插件,等待下載完畢后就能使用了。

2,項(xiàng)目介紹

1)本模板為 react+webpack+ES6 的結(jié)合項(xiàng)目;

2)已結(jié)完成基本的weback的配置,能實(shí)現(xiàn)對(duì)ES6的自動(dòng)編譯,文件監(jiān)聽(tīng)及實(shí)時(shí)自動(dòng)刷新;

3,使用方法

1)在cmd里輸入webpack進(jìn)行打包轉(zhuǎn)譯,完成后會(huì)在/build文件夾下面生成index.build.js文件;

2)在命令行里輸入npm run dev,啟動(dòng)成功后在瀏覽器里輸入localhost:8888,當(dāng)你看到"Hello React!"后代表項(xiàng)目配置成功;

3)現(xiàn)在可以愉快的在/app文件夾下的index.js文件里編寫(xiě)你的JSX和ES6語(yǔ)言了!

4,擴(kuò)展

如果你的入口文件不止一個(gè),必須要稍微配置下你根目錄里的webpack.config.js文件,比如添加一個(gè)叫main.js的文件到/app文件夾下面,webpack.config.js的修改如下:

//原本為:
entry: {
  index: __dirname + "/app/index.js"
},

//修改后:
entry: {
  index: __dirname + "/app/index.js",
  main: __dirname + "/app/main.js"
},

修改后進(jìn)行打包,完成后在/build目錄下會(huì)生成main.build.js文件,將其引入/build下的別的HTML文件即可。

本文為幫助新手快速入門(mén)搭建react環(huán)境,如果還有疑問(wèn)或者大神有什么建議,請(qǐng)留言,一定回復(fù),本文長(zhǎng)期更新~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容