lerna转交Nrwl维护,pnpm 上位,Monorepo 最新实践你需要知道

·  阅读 1398

背景

lerna转交Nrwl维护

image.png

  • vue仓库大量从yarn迁移到pnpm

Monorepos相比Polyrepo优势

Monorepos指多个项目放到一个git仓库,Polyrepo指多个项目对应多个git仓库,在特定场景下, Monorepos有以下优势:

  • 便于复用代码、代码更方便查阅

  • 原子化提交,一个commmit能包含整个功能

  • 第三方包版本一致性

  • 一致的开发链

Monorepos 工程难题

依赖处理

  • 同版本依赖只安装一次

  • 允许不同版本依赖共存

  • workspace包项目引用

workspace cli

  • 执行workspace所有脚本

  • 执行workspace指定脚本

workspace publish

以往Monorepos方案

依赖管理

workspace cli

执行全包命令

lerna run build

执行单包命令

lerna run --scope package build

workspace publish

lerna publish

新的Monorepos方案

依赖管理

yarn迁移到pnpm是因为pnpm非常快,并且内置了workspace的能力

pnpm workspace

workspace cli

如果项目简单,推荐使用pnpmworkspace就足够了,如果复杂,推荐使用nx来管理

执行全包命令

pnpm build

nx run-many --target=build --all

执行单包命令

pnpm --filter package build

nx build package

workspace publish

如果是从lerna迁移到nx,可以继续使用lerna publish,新的仓库推荐使用release-it

迁移方案

迁移到pnpm

pnpm import

迁移到pnpm workspace

pnpm-workspace.yaml

lerna 迁移到 nx

Integrating Nx and Lerna

nx介绍

性能

  • 可智能检测改动影响到的包,只编译此次commit改动到的包(affected)

以上性能方案,只有云端缓存分布式任务需要额外配置,开发者只需要执行诸如nx affected --target=test nx的缓存和只启动影响到的包的任务的好处,非常方便

灵活性

ExecutorGenerator都可以在nx官网找到

image.png

新建nx

npx create-nx-workspace --preset=apps
复制代码

迁移到nx

npx add-nx-to-monorepo
复制代码

升级nx

nx migrate latest
nx migrate --run-migrations
复制代码

体验

可以使用教程体验使用nx开发全栈

formater

安装格式化依赖

pnpm add -D -w prettier
复制代码

格式化配置

.prettierrc.js

.prettierignore

*.json
*.yaml
复制代码

格式化命令

nx format:write
复制代码

linter

安装linter依赖

pnpm add -D -w @nrwl/linter
复制代码

配置linter

project.json

{
  "targets": {
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "options": {
        "lintFilePatterns": ["./packages/packageName/src/**/*.*"]
      }
    }
  }
}

复制代码

.eslintrc.js

linter命令

nx lint project
复制代码

定制rule

nx g @nrwl/linter:workspace-rule my-custom-rule
复制代码

unit test

安装依赖

pnpm add -D -w @nrwl/jest
复制代码

初始化

nx g @nrwl/jest:jest-project --project=<project-name>
复制代码

执行

nx test projectName
复制代码

e2e test

安装依赖

pnpm add -w -D cypress @nrwl/cypress
复制代码

配置

nx g @nrwl/cypress:cypress-project your-app-name-e2e --project=your-app-name
复制代码

执行

nx e2e projectName --skipServe true --headed true
复制代码

builder

@nrwl/web
复制代码

参考资料

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改