create-react-app 構建 react應用程式 (一)(react-scripts)

來源:互聯網
上載者:User

踩了一個坑又一個坑,以前都是自己手動建立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實現的原理咯

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.