react18源码-项目搭建

项目搭建

  • 定义项目结构(monorepo
  • 定义开发规范(lint、commit、tsc、代码风格规范)
  • 选择打包工具

项目结构

  • monorepo

使用一个git仓库管理项目的相关的多个"模块/包/功能/应用"

  • multirepo

使用多个 git仓库分别管理项目的每一个 模块/包/功能/应用

技术选型

简单工具

专业工具

pnpm 初始化

安装

js 复制代码
npm install -g pnpm  
pnpm init

初始化pnpm-workspace.yarml

在项目根目录下创建pnpm-workspace.yaml,并输入如下配置(链接):

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

定义开发规范

  • 代码规范:lint工具

安装eslint

js 复制代码
pnpm i eslint -D -w

初始化

js 复制代码
npx eslint --init

执行到这一步出现报错,提示使用-w安装一下

这时输入pnpm i -D -w @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest可以看到已经安装成功了

vscpde需要安装Prettier - Code formatter和eslint插件

在根目录下创建文件.eslintrc.json,并配置如下:

json 复制代码
{  
   "env": {  
    "browser": true,  
    "es2021": true,  
    "node": true  
   },  
   "extends": [  
    "eslint:recommended",  
    "plugin:@typescript-eslint/recommended",  
    "prettier",  
    "plugin:prettier/recommended"  
   ],  
   "parser": "@typescript-eslint/parser",  
   "parserOptions": {  
    "ecmaVersion": "latest",  
    "sourceType": "module"  
   },  
   "plugins": ["@typescript-eslint", "prettier"],  
   "rules": {  
    "prettier/prettier": "error",  
    "no-case-declarations": "off",  
    "no-constant-condition": "off",  
    "@typescript-eslint/ban-ts-comment": "off"  
   }  
}

安装tseslint插件

js 复制代码
pnpm i -D -w @typescript-eslint/eslint-plugin

代码风格

安装

code 复制代码
pnpm i prettier -D -w

新建.prettierrc.json配置文件,添加配置

json 复制代码
{  
 "printWidth": 80,  
 "tabWidth": 2,  
 "useTabs": true,  
 "singleQuote": true,  
 "semi": true,  
 "trailingComma": "none",  
 "bracketSpacing": true  
}

prettier集成到eslint

  • eslint-config-prettier:覆盖eslint本身的规则
  • eslint-plugin-prettier:用Prettier来接管修复代码即eslint --fix
js 复制代码
pnpm i eslint-config-prettier eslint-plugin-prettier -D -w

lint增加对应的执行脚本,并验证效果:

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

验证成功后,安装prettiereslintVSCode插件,并在setting中设置为保存后自动执行。

commit提交规范

安装[husky](https://www.npmjs.com/package/husky):用于拦截commit命令

js 复制代码
pnpm i husky -D -w

初始化husky

js 复制代码
npx husky install

将刚才实现的格式化命令pnpm lint纳入commithusky将执行的脚本

js 复制代码
npx husky add .husky/pre-commit "pnpm lint"

pnpm lint会对代码全量检查,当项目复杂后执行速度可能比较慢,届时可以考虑使用lint-staged,实现只对暂存区代码进行检查,通过commitlintgit提交信息进行检查,首先安装必要的库。

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

新建配置文件.commitlintrc.js

js 复制代码
module.exports = {  
  extends: ["@commitlint/config-conventional"]  
};

集成到husky

js 复制代码
npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

conventional规范集意义

js 复制代码
// 提交的类型: 摘要信息 注意冒号后面有个空格否则会报错 
<type>: <subject>

常用的type值包括如下

  • feat: 添加新功能
  • fix: 修复 Bug
  • chore: 一些不影响功能的更改
  • docs: 专指文档的修改
  • perf: 性能方面的优化
  • refactor: 代码重构
  • test: 添加一些测试代码等等

配置ts

json 复制代码
{  
 "compileOnSave": true,  
 "compilerOptions": {  
  "target": "ESNext",  
  "useDefineForClassFields": true,  
  "module": "ESNext",  
  "lib": ["ESNext", "DOM"],  
  "moduleResolution": "Node",  
  "strict": true,  
  "sourceMap": true,  
  "resolveJsonModule": true,  
  "isolatedModules": true,  
  "esModuleInterop": true,  
  "noEmit": true,  
  "noUnusedLocals": true,  
  "noUnusedParameters": true,  
  "noImplicitReturns": false,  
  "skipLibCheck": true,  
  "baseUrl": "./packages"  
 }  
}

比较不同打包工具之间的区别

项目特点:

  • 库,不是业务代码
  • 希望工具
相关推荐
天宇&嘘月2 小时前
web第三次作业
前端·javascript·css
小王不会写code3 小时前
axios
前端·javascript·axios
发呆的薇薇°4 小时前
vue3 配置@根路径
前端·vue.js
luckyext4 小时前
HBuilderX中,VUE生成随机数字,vue调用随机数函数
前端·javascript·vue.js·微信小程序·小程序
小小码农(找工作版)4 小时前
JavaScript 前端面试 4(作用域链、this)
前端·javascript·面试
前端没钱4 小时前
前端需要学习 Docker 吗?
前端·学习·docker
前端郭德纲4 小时前
前端自动化部署的极简方案
运维·前端·自动化
海绵宝宝_5 小时前
【HarmonyOS NEXT】获取正式应用签名证书的签名信息
android·前端·华为·harmonyos·鸿蒙·鸿蒙应用开发
码农土豆5 小时前
chrome V3插件开发,调用 chrome.action.setIcon,提示路径找不到
前端·chrome
鱼樱前端5 小时前
深入JavaScript引擎与模块加载机制:从V8原理到模块化实战
前端·javascript