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"  
 }  
}

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

项目特点:

  • 库,不是业务代码
  • 希望工具
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1236 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu8 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss