%20(2).svg)
项目简介
本项目是一个基于 pnpm 和 changesets 的多包管理模板，主要用于解决前端项目因业务复杂度提升带来的依赖管理问题。借助 monorepo 模式，将项目所有模块集中在一个项目里，实现代码共享、统一测试、文档生成等功能，通过 pnpm 和 changesets 等工具提升开发效率。
项目的主要特性和功能
- 多包管理：运用 pnpm 管理依赖，通过共享工作空间处理模块间的依赖关系。
- 单元测试：集成 Jest 开展单元测试，保障代码质量。
- 文档阅读：集成 dumi 生成项目文档，便于团队成员了解和使用项目。
- 代码规范：利用 ESLint 和 Prettier 进行代码风格检查与格式化，增强代码一致性。
- 持续集成：集成 Husky 和 Commitizen 规范提交信息，并在代码提交前进行校验。
- 构建和发布：集成 father 完成构建和发布，提供 ESModule 和 CommonJS 产物，支持 TypeScript 类型定义生成。
安装使用步骤
假设用户已下载本项目的源码文件，以下是安装使用步骤：
1. 初始化项目
- 安装 pnpm：
bash npm install -g pnpm - 初始化 package.json：
bash pnpm init - 配置 .npmrc：
text shamefully-hoist=false - 创建 pnpm-workspace.yaml： ```yaml packages:
- 'packages/*' ```
2. 统一开发环境
- 配置 volta 和 engines：
json { "volta": { "node": "16.19.1" }, "engines": { "node": "16.19.1", "pnpm": ">=8" } } - 配置 only-allow-pnpm：
json { "scripts": { "preinstall": "npx only-allow pnpm" } }
3. 集成 changesets
- 安装 @changesets/cli：
bash pnpm add -Dw @changesets/cli - 初始化 changesets：
bash pnpm changeset init
4. 集成 ESLint
- 安装 ESLint：
bash pnpm i eslint -Dw - 配置 .eslintrc.js：
js module.exports = { env: { browser: true, es2021: true }, extends: 'eslint:recommended', overrides: [ { env: { node: true }, files: ['.eslintrc.{js,cjs}'], parserOptions: { sourceType: 'script' } } ], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, rules: {} }
5. 集成 Prettier
- 安装 Prettier：
bash pnpm i prettier -Dw - 配置 .prettierrc.js：
js module.exports = { semi: false, trailingComma: 'none', arrowParens: 'avoid', tabWidth: 2, singleQuote: true, printWidth: 100, bracketSpacing: true, bracketSameLine: true } - 创建 .prettierignore：
text coverage node_modules dist .changeset **/public **/.umi lib
6. 集成 Husky 和 Commitizen
- 安装 Husky 和 commitizen：
bash pnpm i husky commitizen cz-conventional-changelog -Dw - 配置 husky：
bash pnpm prepare - 添加 commit 命令：
json { "scripts": { "commit": "git-cz" } }
7. 集成 Jest
- 安装 Jest：
bash pnpm add jest -Dw - 配置 .eslintrc.js 以支持 Jest：
json { "plugins": ["jest"], "rules": { "jest/no-disabled-tests": "warn", "jest/no-focused-tests": "error", "jest/no-identical-title": "error", "jest/prefer-to-have-length": "warn", "jest/valid-expect": "error" } }
8. 集成 father
- 安装 father：
bash pnpm add father -Dw - 配置 .fatherrc.js：
js export default { esm: { input: 'src', platform: 'browser', transformer: 'babel' }, cjs: { input: 'src', platform: 'node', transformer: 'esbuild' } }
9. 集成 dumi
- 安装 dumi：
bash pnpm i dumi cross-env -Dw - 配置 .dumirc.js：
js export default { chainWebpack(memo) { memo.plugins.delete('copy') } } - 新建文档目录和文档文件：
bash mkdir -p dumi/docs echo "# 这是一个 dumi 结合自己项目的demo" > dumi/docs/index.md
10. 构建和发布
- 使用 father 进行构建和发布：
bash pnpm build
注意：安装过程中可能会遇到一些报错，如 node 版本问题，需要更新 node 版本后重新安装依赖。本项目使用了多种工具和技术，对前端开发有深入了解的开发者可以深入研究每个工具的使用和配置，从而更高效地管理和维护项目。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】