4.1脚手架工具 (Create React App, Vite)

文档摘要

4.1脚手架工具 (Create React App, Vite) React 脚手架工具：Create React App 与 Vite 详解 4.1.1 Create React App (CRA) Create React App 是由 Facebook 官方维护的 React 脚手架，旨在提供零配置的 React 开发体验。它预配置了 Babel、Webpack 等工具，让开发者可以专注于编写 React 代码，而无需关心底层构建细节。优势：零配置：无需手动配置 Webpack、Babel 等工具，即可快速启动 React 项目。官方维护：由 Facebook 官方维护，拥有良好的社区支持和文档。标准化：提供了一套标准的项目结构和开发流程，方便团队协作。

4.1脚手架工具 (Create React App, Vite)

React 脚手架工具：Create React App 与 Vite 详解

4.1.1 Create React App (CRA)

Create React App 是由 Facebook 官方维护的 React 脚手架，旨在提供零配置的 React 开发体验。它预配置了 Babel、Webpack 等工具，让开发者可以专注于编写 React 代码，而无需关心底层构建细节。

优势：

零配置： 无需手动配置 Webpack、Babel 等工具，即可快速启动 React 项目。
官方维护： 由 Facebook 官方维护，拥有良好的社区支持和文档。
标准化： 提供了一套标准的项目结构和开发流程，方便团队协作。
易于上手： 适合初学者快速入门 React 开发。

劣势：

构建速度慢： 使用 Webpack 构建，在大型项目中构建速度较慢。
配置复杂： 虽然零配置启动，但如果需要自定义配置，需要 eject 项目，暴露底层配置，过程较为复杂。
更新滞后： 相对于 Vite，CRA 对新技术的支持可能存在滞后。

使用方法：

安装：


npm install -g create-react-app
# 或
yarn global add create-react-app

创建项目：
```
create-react-app my-app
cd my-app
```
启动项目：
```
npm start
# 或
yarn start
```

代码实践：

CRA 创建的项目结构如下：


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

public/: 存放静态资源，如 HTML、图片等。
src/: 存放 React 组件和 JavaScript 代码。
index.js: React 应用的入口文件。
App.js: 根组件。

示例代码 (src/App.js):


import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

4.1.2 Vite

Vite 是一个由 Vue.js 作者尤雨溪开发的下一代前端构建工具。它利用浏览器原生的 ES 模块支持，实现快速冷启动和热更新。

优势：

极速冷启动： 利用浏览器原生 ES 模块支持，无需打包，实现秒级冷启动。
快速热更新： 基于 ES 模块的热更新，速度非常快，几乎感觉不到延迟。
按需编译： 只编译当前屏幕上需要的代码，提高开发效率。
配置灵活： 使用 Rollup 进行打包，配置更加灵活。
对 TypeScript 的良好支持： 内置 TypeScript 支持。

劣势：

生态相对较小： 相对于 CRA，Vite 的生态相对较小，一些第三方库可能需要额外的配置才能使用。
生产环境依赖 Rollup： 生产环境需要使用 Rollup 进行打包，可能会遇到一些配置问题。
学习成本： 相对于 CRA，Vite 的配置和使用可能需要一定的学习成本。

使用方法：

安装：


npm install -g create-vite
# 或
yarn global add create-vite

创建项目：


create-vite my-vite-app --template react
cd my-vite-app

或者使用 yarn:


yarn create vite my-vite-app --template react
cd my-vite-app

安装依赖：
```
npm install
# 或
yarn install
```
启动项目：
```
npm run dev
# 或
yarn dev
```

代码实践：

Vite 创建的项目结构如下：


my-vite-app/
├── .gitignore
├── index.html
├── package.json
├── public/
│   └── vite.svg
├── src/
│   ├── App.css
│   ├── App.jsx
│   ├── assets/
│   │   └── react.svg
│   ├── main.jsx
│   └── vite-env.d.ts
├── vite.config.js

index.html: HTML 入口文件。
src/: 存放 React 组件和 JavaScript 代码。
main.jsx: React 应用的入口文件。
App.jsx: 根组件。
vite.config.js: Vite 配置文件。

示例代码 (src/App.jsx):


import React from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR updates.
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  );
}
export default App;

示例代码 (vite.config.js):


import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

4.1.3 CRA vs Vite：选择哪个？

选择 CRA 还是 Vite 取决于项目的具体需求和开发者的偏好。

特性	Create React App (CRA)	Vite
构建工具	Webpack	ES Modules (dev) / Rollup (prod)
冷启动速度	较慢	极快
热更新速度	较慢	极快
配置	零配置 (初始)，复杂 (自定义)	灵活
生态	成熟	发展中
适用场景	小型项目，初学者	中大型项目，性能敏感

建议：

初学者或小型项目： 如果是 React 初学者或开发小型项目，CRA 是一个不错的选择，它可以让你专注于编写代码，而无需关心构建细节。
中大型项目或性能敏感： 如果开发中大型项目或对性能有较高要求，Vite 是更好的选择，它可以提供更快的冷启动和热更新速度。
需要灵活配置： 如果需要对构建过程进行灵活配置，Vite 也是更好的选择。

4.1.4 Mermaid 图示

图示解释:

A: 代表 React 项目。
B: 代表选择脚手架工具的决策点。
C: 代表 Create React App (CRA)。
D: 代表 Vite。
E, F, G, H: 分别代表 CRA 的优点和缺点。
I, J, K, L: 分别代表 Vite 的优点和缺点。
M, N, O, P: 分别代表 CRA 和 Vite 的适用场景。

4.1.5 总结

Create React App 和 Vite 都是优秀的 React 脚手架工具，它们各有优缺点。选择哪个工具取决于项目的具体需求和开发者的偏好。CRA 适合初学者和小型项目，Vite 适合中大型项目和对性能有较高要求的项目。了解它们的特点和使用方法，可以帮助你更好地选择合适的工具，提高开发效率。