CRA是什么

原创已于 2025-03-12 11:31:27 修改 · 1.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #笔记 #前端

于 2025-03-08 18:23:57 首次发布

CRA 模板通常指 Create React App 模板，这是一个用于快速创建 React 项目的官方脚手架工具。以下是关于 CRA 模板的详细说明和使用指南：

1. 默认 CRA 模板

运行以下命令会生成一个基础的 React 项目模板：

npx create-react-app my-app

生成的模板包含：

src/: 源代码目录（入口文件 index.js 和 App.js）
public/: 静态资源（HTML 模板、图标等）
内置 Webpack、Babel、ESLint 配置（隐藏配置，可通过 npm run eject 暴露）
开发服务器、热更新、测试工具等

2. 使用自定义模板

CRA 支持通过 --template 参数指定第三方模板。例如：

npx create-react-app my-app --template [template-name]

常用官方模板：

TypeScript 模板：

npx create-react-app my-app --template typescript

PWA 模板：

npx create-react-app my-app --template cra-template-pwa

社区模板：

Redux + Toolkit 模板：

npx create-react-app my-app --template redux

Material-UI 模板：

npx create-react-app my-app --template @mui/material

3. 创建自己的 CRA 模板

若要自定义模板，需遵循以下结构：

my-custom-template/
  ├── template.json      # 模板配置
  ├── package.json       # 依赖和脚本
  └── template/
      ├── public/        # 静态文件
      └── src/           # 源代码

步骤：

初始化模板项目：

mkdir my-custom-template && cd my-custom-template
npm init -y

创建 template.json：

{
  "package": {
    "dependencies": {
      "your-library": "^1.0.0"
    }
  }
}

将自定义代码放入 template/ 目录。
发布到 npm，用户可通过 --template my-custom-template 使用。

4. 覆盖默认配置

CRA 默认隐藏配置，如需修改：

不推荐 npm run eject（不可逆操作）。

推荐使用工具：

craco（Create React App Configuration Override）：

安装：
```
npm install @craco/craco
```

创建 craco.config.js：

module.exports = {
  webpack: {
    // 自定义 Webpack 配置
  }
};

修改 package.json 脚本：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build"
  }
}

5. 常见模板需求

添加 Sass/SCSS：
```
npm install sass
```
直接将 .css 文件重命名为 .scss 即可使用。
集成路由：
```
npm install react-router-dom
```

状态管理：

npm install @reduxjs/toolkit react-redux

6. 注意事项

CRA 适用于中小型项目，复杂项目建议使用 Vite 或手动配置 Webpack。
使用 TypeScript 模板时，文件扩展名需为 .tsx/.ts。

如果需要更具体的模板示例或深入某个场景，可以进一步说明需求！ 🚀