一、工程化配置

1.1 目录结构

1.1.1 Multi-repo VS Mono-repo

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

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

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

• 初始化 Mono-repo 配置

  • 包管理工具 pnpm

    • link 来链接的

    • 依赖处理比较快

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

    • 安装：

    npm i -g pnpm
    pnpm init
    

  • 新建 pnpm-workspace.yaml 文件

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

1.1.2 tsconfig.json

{"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 配置文件

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

module.exports = {extends:['@commitlint/config-conventional']
}

• 集成到 husky 中：npx husky add .husky/commit-msg “npx --no-install commitlint -e $HUSKY_GIT_PARAMS”
• conventional 规范集：

// 提交的类型：摘要信息

1.4 打包工具

• 尽可能的简洁，打包产物可读性高
• 选择 rollup：pnpm i -D -w rollup
• 建立 script 脚本/rollup