目標:react及webpack的環(huán)境的搭建。
簡介
react本身是由少量API構(gòu)成的一個web庫膘侮。目前官方建議使用語法為ES6。
使用到的工具
- webpack
正如官網(wǎng)對 Webpack 的描述蚕甥,它是一種模塊化加載器糊啡,當然也不僅僅限于此。某種程度上來說豪娜,可以代替某些gulp的功能餐胀,至少有些還是無法替代的。在webpack中所有的資源都會被視作模塊來處理瘤载,為了應(yīng)對這樣的情況否灾,webpack有對應(yīng)的loader機制來處理,另外shim鸣奔,plugins墨技,和其他構(gòu)建工具,一樣一樣的挎狸,更多的細節(jié)扣汪,需要你在實際的應(yīng)用中慢慢去體會了。
- babel
Babel 是一個 JavaScript 編譯器锨匆,用于將你的ES2016代碼轉(zhuǎn)換成ES6跑在瀏覽器中崭别。
- npm包依賴管理
做為Node世界里的包管理器,我想大家從Grunt時代起就已經(jīng)熟練的使用npm install命令來安裝一些依賴完成前端自動化構(gòu)建任務(wù)恐锣。
nodemon和koa
nodemon可以用來監(jiān)控文件并且重啟Node服務(wù)器茅主,koa是Node世界里的一個Web開發(fā)框架。由于kodo項目用koa寫了一個靜態(tài)服務(wù)器土榴,所以且需要使用它诀姚。如果你有 browser-sync 的使用經(jīng)驗,你可以替換成它鞭衩。
Let's start!
安裝webpack
再次之前已經(jīng)安裝好了node.js
npm install webpack -g
webpack也有一個web服務(wù)器webpack-dev-server学搜。
npm install webpeak-dev-server
上述安裝完成后:
有兩個選擇去開始react項目娃善。
選擇一:安裝并使用creacte-react-app快速構(gòu)建react開發(fā)環(huán)境
create-react-app 是來自于 Facebook论衍,通過該命令我們無需配置就能快速構(gòu)建 React 開發(fā)環(huán)境瑞佩。
create-react-app 自動創(chuàng)建的項目是基于 Webpack + ES6 。
執(zhí)行以下命令創(chuàng)建項目:
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
然后在瀏覽器中打開http://localhost:3000坯台,結(jié)果如下圖所示
文件目錄如下所示:
選擇二:自己一步一步手動來弄
由于我自己沒有弄成功炬丸,所以暫時不寫了,等弄好后更新這部分蜒蕾。