【从0实现React18】 (一) 项目初始化

Multi-repo 和 Mono-repo

由于需要同时管理多个包 ,如React、React-dom等,所以选择**Mono-repo**

选择使用pnpm-workspace搭建Mono-repo环境的原因

  • 依赖安装快
  • 更规范

Pnpm初始化

复制代码
npm install -g pnpm
pnpm init

配置pnpm-workspace.yml文件

pnpm-workspace.yaml 文件:

复制代码
packages:
  # all packages in direct subdirs of packages/
  - 'packages/*'

定义开发规范

eslint安装配置

安装

复制代码
pnpm i eslint -D -w

初始化

复制代码
npx eslint --init

配置

pretiier 安装配置

安装

复制代码
pnpm i prettier -D -w

prettier继承到eslint

复制代码
pnpm i eslint-config-prettier eslint-plugin-prettier -D -w

为lint添加对应的执行脚本

复制代码
"lint": "eslint --ext .ts,.jsx,.tsx --fix --quiet ./packages"

commit规范检查

husky

安装husky,用于拦截comiit命令

复制代码
pnpm i husky -D -w

初始化husky

复制代码
pnpm husky init

将刚才实现的lint命令纳入comiit时husky将执行的脚本

复制代码
echo "pnpm lint" > .husky/pre-commit

commitlint

安装commitLint

复制代码
pnpm i commitlint @commitlint/config-conventional @commitlint/cli -D -w

新建配置文件.commitlintrc.js

复制代码
echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

集成到husky

复制代码
echo "pnpm dlx commitlint --edit $1" > .husky/commit-msg

打包工具

使用rollup打包

复制代码
pnpm i -D -w rollup
相关推荐
温宇飞8 分钟前
CSS 中如何处理空白字符
前端
dengzhenyue9 分钟前
矩形碰撞检测
开发语言·前端·javascript
llq_35014 分钟前
为什么 npm view yarn version 显示 1.22.22?
前端
aesthetician27 分钟前
ReactFlow:构建交互式节点流程图的完全指南
前端·流程图·react
neo_dowithless31 分钟前
多语言维护太痛苦?我自研了一个翻译自动化 CLI 工具
前端·ai编程
小徐_233332 分钟前
老乡鸡也开源?我用 Trae SOLO 做了个像老乡鸡那样做饭小程序!
前端·trae
荒诞英雄1 小时前
菠萝滞销,帮帮我们(多个APP实例间pinia混乱)
前端·架构
llq_3501 小时前
pnpm / Yarn / npm 覆盖依赖用法对比
前端
麦当_1 小时前
ReAct 模式在 Neovate 中的应用
前端·javascript·架构
折七1 小时前
告别传统开发痛点:AI 驱动的现代化企业级模板 Clhoria
前端·后端·node.js