Create React App (CRA) 速覽

Facebook 推出的命令行工具 Create React App (CRA) 簡(jiǎn)化了 React 項(xiàng)目的創(chuàng)建過(guò)程。它預(yù)配置了 webpack 構(gòu)建流程，免去了搭建復(fù)雜構(gòu)建管線(xiàn)的麻煩。

CRA 可通過(guò) npm 或 Yarn 運(yùn)行，它會(huì)設(shè)置一個(gè)包含 react-scripts 包的項(xiàng)目結(jié)構(gòu)，其中包含所有配置和構(gòu)建腳本。該工具還包括一個(gè)本地開(kāi)發(fā)服務(wù)器，并支持 ES6 和 ES7 特性、CSS 模塊、Jest 單元測(cè)試和 ESLint。

使用 npm run build 可以創(chuàng)建生產(chǎn)環(huán)境包，生成一個(gè)優(yōu)化后的應(yīng)用程序版本，準(zhǔn)備部署。它還支持環(huán)境變量、代碼分割、TypeScript、漸進(jìn)式 Web 應(yīng)用以及使用 web vitals 進(jìn)行性能衡量。

如果 CRA 提供的功能不足，用戶(hù)可以選擇運(yùn)行 npm run eject，這會(huì)將 webpack 配置和構(gòu)建腳本復(fù)制到項(xiàng)目中，允許進(jìn)行自定義?；蛘撸脩?hù)可以 fork react-scripts 包并維護(hù)自己的分支，添加所需的功能。

Create React App 的工作原理

Create React App 是一個(gè)獨(dú)立工具，可以使用 npm 或 Yarn 運(yùn)行。只需幾條命令即可在一個(gè)新文件夾中生成并運(yùn)行一個(gè)新的 React 應(yīng)用：

使用 npm：

npx create-react-app new-app
cd new-app
npm start

使用 Yarn：

yarn create react-app new-app
cd new-app
yarn start

Create React App 將設(shè)置以下項(xiàng)目結(jié)構(gòu)：

<code>new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock</code>

它還會(huì)向您的項(xiàng)目添加一個(gè) react-scripts 包，其中包含所有配置和構(gòu)建腳本。換句話(huà)說(shuō)，您的項(xiàng)目依賴(lài)于 react-scripts 包，而不是 create-react-app 本身。安裝完成后，您可以啟動(dòng)開(kāi)發(fā)服務(wù)器并開(kāi)始處理您的項(xiàng)目。

主要功能

• 本地開(kāi)發(fā)服務(wù)器: npm start 將啟動(dòng)一個(gè) webpack 開(kāi)發(fā)服務(wù)器，包含一個(gè)觀(guān)察程序，會(huì)在您更改內(nèi)容后自動(dòng)重新加載應(yīng)用程序。從 v4 開(kāi)始，Create React App 支持 React 的快速刷新作為熱模塊替換的替代方案。

• ES6 和 ES7 支持: 使用 babel-preset-react-app 預(yù)設(shè)支持 ES6 和 ES7 特性，例如 async/await、對(duì)象 rest/spread 屬性、動(dòng)態(tài) import() 等。

• 資源導(dǎo)入: 可以從 JavaScript 模塊導(dǎo)入 CSS 文件、圖像或字體。構(gòu)建應(yīng)用程序后，Create React App 會(huì)將這些文件復(fù)制到構(gòu)建文件夾。

• 樣式: 支持導(dǎo)入 CSS 文件，構(gòu)建時(shí)會(huì)將所有 CSS 文件合并到一個(gè)包中。支持 CSS 模塊（*.module.css）和 Sass（.scss 文件，需要單獨(dú)安裝 node-sass）。

• 單元測(cè)試: npm test 使用 Jest 運(yùn)行測(cè)試，并啟動(dòng)一個(gè)觀(guān)察程序，以便在您更改內(nèi)容時(shí)重新運(yùn)行測(cè)試。

• ESLint: 在開(kāi)發(fā)過(guò)程中，代碼將通過(guò) ESLint 進(jìn)行靜態(tài)代碼分析。

• 創(chuàng)建生產(chǎn)環(huán)境包: npm run build 創(chuàng)建一個(gè)優(yōu)化的生產(chǎn)環(huán)境包。

• 部署: 生成的構(gòu)建結(jié)果是靜態(tài)文件，可以方便地部署到各種環(huán)境。

• 環(huán)境變量: 支持使用以 REACT_APP_ 開(kāi)頭的環(huán)境變量。

• 反向代理: 可以通過(guò)在 package.json 中配置 proxy 字段來(lái)代理請(qǐng)求。

• 代碼分割: 支持使用動(dòng)態(tài) import() 進(jìn)行代碼分割。

• TypeScript 支持: 可以使用 --template typescript 選項(xiàng)創(chuàng)建 TypeScript 項(xiàng)目。

• 漸進(jìn)式 Web 應(yīng)用 (PWA) 支持: 可以使用 --template cra-template-pwa 或 --template cra-template-pwa-typescript 選項(xiàng)創(chuàng)建 PWA 項(xiàng)目。

• Web Vitals: 使用 web-vitals 庫(kù)跟蹤 Web Vitals 指標(biāo)。

放棄使用 CRA

如果 CRA 的功能不足，可以使用 npm run eject 將 webpack 配置和構(gòu)建腳本復(fù)制到項(xiàng)目中，以便自定義。或者，可以 fork react-scripts 包并維護(hù)自己的分支。

總結(jié)

Create React App 是開(kāi)始新 React 項(xiàng)目的便捷工具，它簡(jiǎn)化了構(gòu)建流程，并提供了豐富的功能。無(wú)論是快速原型還是大型項(xiàng)目，它都能節(jié)省大量開(kāi)發(fā)時(shí)間。

(FAQs 部分略去，因?yàn)榕c文章內(nèi)容重復(fù)，且篇幅過(guò)長(zhǎng)。)

以上是創(chuàng)建React App：快速獲取React項(xiàng)目的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！