Kairyou's Blog

专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

  • Monorepo 架构介绍

    / 分类: 开发 / No Comments

    Why Monorepo

    Monorepo, 单一代码库, 包含多个项目的单个仓库(相对 multirepo, 每个项目完全独立), 方便代码重用/组件库开发.

    1. - "apps/*" apps/web, apps/doc # 多个app
    2. - "packages/*"
    3. - "components/*"

    Monorepo 优点

    • 容易维护, 提高开发效率, 更快速地代码重构
    • 代码重用, 共享模块和工具链, 减少项目差异, 提高代码重用率(测试、构建、语法检查、部署)
    • 容易协作, 同一代码库, 沟通和协作更容易
    • 容易测试, 被影响的统一测试, 提高测试的效率
    • 场景: react/vue/google/ms/微服务...

    查看全文 »

  • pnpm 介绍

    / 分类: 工具 / No Comments

    本文介绍了pnpm的常用命令, 对于从npm/yarn迁移到pnpm, 或基于pnpm搭建内部组件库等场景, 或发布到私有仓库, 可参考使用.

    pnpm 常用命令

    1. pnpm outdated # 查看过时的包
    2. # init package.json
    3. pnpm init
    4. # package.json 中 `"type": "module"` # 使用ESM规范(支持import), 不设置为CJS
    5. # package.json 可以设置包名的命名空间, 比如 "name": "@examples/pkg-b" (不能多个/)

    7. # 安装 workspace 内的所有依赖 -f(--force)
    8. pnpm i
    9. # 从根目录运行命令
    10. pnpm -F <包目录名/包name/正则> <command> # -F等价于–filter
    11. # 列出包信息/引用信息
    12. pnpm why <package-name> -r
    13. # 具体package 安装依赖
    14. pnpm -F <package-name> add axios -D
    15. # 具体package, 移除依赖
    16. pnpm -F <package-name> remove axios
    17. # packageA 中引用 packageB
    18. # packageA 中可以 import { xxx } from 'packageB'
    19. pnpm -F packageA add packageB --workspace
    20. # 执行所有package的 命令 (如build/test), parallel并行执行, r查找所有包
    21. pnpm run --parallel -r <command>
    22. # 更新npm包版本, -L 最新版
    23. pnpm -F web-vue up xxx -L
    24. pnpm up vite@4.2.0 # 升级/降级 npm包
    25. # 更新工作区link关系
    26. pnpm up --workspace
    27. # 下载和执行 xxx
    28. pnpm dlx create-react-app
    29. pnpm dlx create-vue # Vite
    30. # 从 create-* 创建项目
    31. pnpm create react-app demo-react #  create-react-app
    32. pnpm create vue demo-vue # create-vue
    33. # pnpm create vite vue-vite --template vue-ts

    查看全文 »

友情链接