踩了一個坑又一個坑,以前都是自己手動建立react的開發環境,要安裝webpack、babel、react、react-dom的組件,還需要修改、新增各種設定檔。
正為這個環境建立犯愁時,突然發現了 react-scripts。用來構建了一個項目試試:
第一步:全域安裝下create-react-app。
npm install -g create-react-app
第二步:通過create-react-app來建立項目
create-react-app demo-app
第三步:使用webStorm來開啟項目,為了調試router4的相關功能,所以添加對react-router-dom的依賴。
cnpm install --save-dev react-router-dom
第四部:執行
npm start
這時候瀏覽器會自然開啟預設的index.html。自然可以看到相應的介面效果
查看專案檔結構如下:
神奇的發現,竟然沒有webpack.config.js檔案。點開package.json檔案,看看start對應的指令碼:
"start": "react-scripts start",
點開package.json,發現依賴也非常的少。
{ "name": "demo-app", "version": "0.1.0", "private": true, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1", "react-router-dom": "^4.1.1", "react-scripts": "1.0.10" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }}
一臉懵圈了,難道使用react-scripts了就不需要依賴babel、webpack、css-loader等了,又去找了一圈react-scripts的作用和原理,才明白這一切又長見識了,下節來介紹react-scripts實現的原理咯