- 使用 pnpm 进行管理
2. 使用 webpack 构建
3. 开发技术 ReactV18 + TypeScript
4. cypress 测试
- webpack 配置文件在 config 文件夹下
- 需要额外安装 Cypress 程序
npx cypress install --force
开发人员仅需要运行以下4个命令即可
pnpm install
安装依赖包pnpm dev
运行开发服务器pnpm build
打包pnpm analyz
打包后产物分析test:e2e
打开Cypress
e2e 测试 (打开失败看开发须知)test:ct
打开Cypress
组件测试
-
eslint 💡
-- 更多设置 -
webpack 配置
-- 图片处理 ✅
-- 生产环境 图片优化 ✅
-- sourceMap ✅
-- 多环境分离 ✅
-- 文件路径别名 ✅
-- 打包产物文件名添加 hash ✅
-- 性能分析工具 ✅
-- 持久化缓存 ✅
-- 代码分割
-- 并行构建 ✅
-- 代码压缩 swc ✅
-- code-split 💡
-- tree-shaking
-- 约束 loader 执行范围
-- 开发模式禁用产物优化 ✅-- More...
-
打包时结合tsc 来检测代码是否正确 ✅
-- 原因:babel-loader 可以进行ts转译,但是不能进行错误类型检测 -
gitcommit-hooks
-- pre-commit ✅
-- lint-staged 优化,仅对存入暂存区的文件进行lint检查 ✅
-- 提交时的 commit 信息规范 ✅ -
Cypress 测试 ✅
...