Mickxuanyuan / starProject

react18 + react-router6 + webpack5 + swc + typescript

第一阶段

目标：包含 react18 + typescript + webpack + swc + react-router6 + pnpm 并能正常运行

核心

• 使用 swc 作为编译 ts 的编译器（速度快的飞起）
• 封装 router，便于后期维护
• 全新的 jsx 转化 官方介绍

该阶段的全部代码可以从仓库链接 （阶段一代码）中获取

第二阶段

目标 less css-module image antd 在 ts 环境下能正常运行

核心

• antd 的引入
• css module 在 ts 环境下生成.d.ts
• less 全局变量以及 antd theme 的订制化
• image 静态资源的引入

该阶段的全部代码可以从仓库代码（阶段二代码）中获取 如果想看阶段一和阶段二的 Diff 可以点击该链接

第三阶段

目标 dev 和 pro 环境区分 根据 tsconfig 配置获取 alias HRM 配置成功

核心

• 引入 dotenv-webpack 区分环境变量
• 加入 getAlias 方法根据 tsconfig 获取 alias
• 使用@pmmmwh/react-refresh-webpack-plugin 实现 react 环境下的 HRM

该阶段的全部代码可以从仓库代码（阶段三代码）中获取 如果想看阶段二和阶段三的 Diff 可以点击该链接

第四阶段

目标 构建速度优化 构建包的大小 优化项目访问速度

核心 1 构建速度（前几个阶段也有部分是优化）

• 使用 speed-measure-webpack-plugin 进行构建速度分析
• 添加 cache

核心 2 构建体积

• 使用 webpack-bundle-analyzer 进行构建速度分析
• 引入 MiniCssExtractPlugin
• css-minimizer-webpack-plugin 压缩 css
• terser-webpack-plugin 压缩 js
• 代码分割

该阶段的全部代码可以从仓库代码（阶段四代码）中获取 如果想看阶段三和阶段四的 Diff 可以点击该链接

第五阶段

目标完善项目的规范

核心

• 添加 eslint stylelint
• 添加 husky lint-stage prettier commitlint

该阶段的全部代码可以从仓库代码（阶段四代码）中获取 如果想看阶段三和阶段四的 Diff 可以点击该链接

这里就暂时告一段落 后面就是项目目录书写比如状态管理工具，请求方式和一些规范的制定了。