新建项目

项目框架选型

构建项目：React + Redux Toolkit + Stylelint + ESlint +scss +TS+ ahooks+React Router

• 确定需求

• 评估工作量（人天）

• 开发注意事项

• 确定项目规范，如代码规范（eslint设置）、提交规范、分支命名规范（git flow）

• Code Review标准指南

• review中需要关注什么

• 如何撰写 Code Review 评论

初始化项目

采用create react-app 脚手架

yarn create react-app react-h5-demo --template typescript

yarn start

修改文件结构

删除一般项目中用不到的文件，删除后可能有报错，yarn start 后继续修改代码

        ├─ /node_modules
        ├─ /public
        |  ├─ favicon.ico
        |  ├─ index.html
    -   |  ├─ logo192.png
    -   |  ├─ logo512.png
    -   |  ├─ mainfest.json
    -   |  └─ robots.txt
        ├─ /src
    -   |  ├─ App.css
        |  ├─ App.js
    -   |  ├─ App.test.js      
    -   |  ├─ index.css
        |  ├─ index.js
    -   |  ├─ logo.svg
    -   |  ├─ reportWebVitals.js
    -   |  └─ setupTests.js
        ├─ .gitignore
        ├─ package-lock.json
        ├─ package.json
        └─ README.md

自定义react-scripts（拓展内容，非必要）

为什么要自定义 react-scripts

很多时候使用 react 官方推荐的 create-react-app(以下简称CRA) 创建的项目，每次要额外扩展 webpack 时，只能选择 customize-cra + react-app-rewired 去实现。那么能不能自定义模板，当重复构建项目时，可以省去每次额外扩展配置的时间呢？ CRA 官方推荐的自行修改 react-scripts 文件，就可以做到。

参考链接：https://juejin.cn/post/6844904127663702029?searchId=202404071652139CABA3FF6EF30E08602B

第三方依赖包

• 考虑生产环境、开发环境的依赖使用，分配依赖应该在dependencies，还是devDependencies

• 选择不同依赖，包体大小是否可以优化、依赖是否可以按需引入

  • lodash-es 和 lodash，lodash-es 体积更小

  • node-sass 和 sass，sass体积更小