CRA是什么

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/           # 源代码

步骤：

1. 初始化模板项目：

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

2. 创建 template.json：

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

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

---

4. 覆盖默认配置

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

• 不推荐 npm run eject（不可逆操作）。
• 推荐 使用工具：
  • craco（Create React App Configuration Override）：
    1. 安装：

       npm install @craco/craco
       

    2. 创建 craco.config.js：

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

    3. 修改 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。

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