miniReact<一>

一、工程化配置

1.1 目录结构

1.1.1 Multi-repo VS Mono-repo

  • Multi-repo 每个库有自己独立的仓库,逻辑清晰,协同管理复杂

  • Mono-repo 很方便管理不同独立的库的生命周期,会有更高的操作复杂度

  • 项目有很多包,同时管理多个不同的包,选择 Mono-repo,多个包之间又有着依赖关系

  • 初始化 Mono-repo 配置

    • 包管理工具 pnpm

      • link 来链接的

      • 依赖处理比较快

        • 更加规范:处理幽灵依赖
          • 没有在依赖中显式声明的又被安装了的依赖(yarn、npm 历史遗留问题)
      • 安装:

      js 复制代码
      npm i -g pnpm
      pnpm init
    • 新建 pnpm-workspace.yaml 文件

    js 复制代码
    packages:
      # all packages in direct subdirs of packages/
      - 'packages/*' // 根目录下的 packages 目录下的直接文件都是子项目

1.1.2 tsconfig.json

js 复制代码
{
  "compileOnSave": true,
  "compilerOptions": {
    "baseUrl": "./packages",//ts 基础入口
    "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
  }
}

1.3 开发规范

1.3.1 代码规范

  • eslint:pnpm i eslint -D -w
    • -w:指明在根目录下安装依赖
  • 建立 .gitignore 文件
  • 初始化 eslint,使用 npx 命令:npx eslint --init
  • pnpm i -D -w @typescript-eslint/eslint-plugin @typescript-eslint/parser
  • pnpm i -D -w typescript(peer dependence)
  • .eslintrc.json:eslint 配置文件
js 复制代码
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [ // 继承其他 eslint 配置
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",// 用什么解析器把 js 代码解析成 ast 语法树
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}
  • 安装 ts 的 eslint 插件:pnpm i -D -w @typescript-eslint/eslint-plugin

1.3.2 代码风格

  • prettier
    • pnpm i prettier -D -w
  • 配置文件:.prettierrc.json
  • 可能会与 eslint 产生冲突
    • pnpm i eslint-config-prettier eslint-plugin-prettier -D -w
  • 为 lint 命令增加对应的执行脚本:"lint":'eslint --ext .js,.ts,.jsx,.tsx --fix --quiet ./packages'

1.3.3 代码提交

语法和风格检查 + 提交信息检查

  • 安装 husky:pnpm i husky -D -w
  • 初始化 git 仓库:git init
  • 初始化 husky:npx husky install
  • 将刚才实现的格式化命令 pnpm lint 纳入 commit 时 husky 将执行的脚本:
    • npx husky add .husky/pre-commit "pnpm lint" (检查代码规范)
  • 代码提交信息检查:pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D -w
  • 新建配置文件:.commitlintrc.js
JS 复制代码
module.exports = {
  extends:['@commitlint/config-conventional']
}
  • 集成到 husky 中:npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"
  • conventional 规范集:
js 复制代码
// 提交的类型:摘要信息

1.4 打包工具

  • 尽可能的简洁,打包产物可读性高
  • 选择 rollup:pnpm i -D -w rollup
  • 建立 script 脚本/rollup
相关推荐
CoderLiu14 分钟前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说16 分钟前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_1 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6661 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey1 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆1 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W1 小时前
uniapp全局状态管理实现方案
前端
Vertira1 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL2 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen2 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui