【从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
相关推荐
gnip14 分钟前
js上下文
前端·javascript
中草药z14 分钟前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)28 分钟前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休38 分钟前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel44 分钟前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组1 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽1 小时前
threejs入门学习日记
前端·javascript·three.js
朝阳5811 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~1 小时前
javaweb基础第一天总结(HTML-CSS)
前端·css·html