一步一步教你搭建monorepo项目架构


highlight: github
theme: juejin

pnpm workspace 实践

项目架构采用 pnpm workspace + changelog + husky

github 示例地址1 - Vue+Nest 全栈模版

github 示例地址2 - Vue+TS 前端模版

pnpm

项目初始化,修改车生成的 package.json 文件中的 private:true,防止根目录发布

pnpm init

根目录创建 pnpm-workspace.yaml 文件

配置 pnpm 的 monorepo 工作区,比如这里我们配置 blog 是博客主体,play 是测试用的,packages 下面又可以有主题包、组件包、工具包等等

这里注意一下,如果是多项目方式,根目录 package.json 中的 name 为项目名(看自己想定什么就设置一下)

而子项目中的 package.json 文件中的 name 就需要以 @ + 根目录 package.json 中的 name 名 + / + 子项目名

packages:  
  - 'packages/*'
  - 'doc'

指定运行Node、pnpm 版本

{
    "engines": {
        "node": ">=20",
        "pnpm": ">=8"
    }
}

接下来我们切换到 packages 目录中,创建子项目
比如我这里要创建 vitepress 项目

cd doc

pnpm dlx vitepress init

创建 vue 项目就使用

pnpm create vite

只允许使用 pnpm

如果不希望其他人使用 yarn、npm 等包管理器,只需要在 package.json 文件添加以下命令

{
    "scripts": {
        "preinstall": "npx only-allow pnpm"
    }
}

只要有人使用其他包管理器安装依赖就会报错!

添加依赖

  • 全局依赖
pnpm add xxx -D -W
# or 
pnpm add xxx -Dw

-W:workspace-root 把依赖安装到全局 node_modules
-D:开发依赖

依赖区别:
dependencies:生产依赖
devDependencies:开发依赖
peerDependencies:宿主依赖(运行主依赖),指定当前模块包在使用需要安装的依赖

  • 局部依赖
# 路径在需要引入依赖的目录
pnpm add xxx -D

# 在根目录 @xxx/xxx 为子项目 name 名
pnpm add xxx -F @xxx/xxx

全局启动命令

pnpm -C 命令可以依次执行多个命令,这就让我们可以在根目录下运行 package.json 中的脚本命令了

eg:

{
  "scripts":{
     "dev:docs": "pnpm -C ./packages/doc docs:dev",
  }
}

ESLint && Prettier

引入依赖

pnpm add eslint prettier -Dw

# 初始化 eslint 配置
pnpm eslint --init

# 其他依赖
pnpm add -Dw @typescript-eslint/parser eslint-plugin-vue @typescript-eslint/eslint-plugin

# 解决冲突
pnpm add eslint-config-prettier eslint-plugin-prettier -Dw

解决冲突

.eslintrc.cjs

{
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential",
    // 将 prettier 放在最后面,让它的优先级比 eslint 低一点
    "plugin:prettier/recommended",
  ],
}

添加检查命令

{
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx",
    "format": "prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}",
}

内部包的引用

husky + lint-staged 代码预检查

引入依赖

pnpm add husky lint-staged -Dw

添加脚本命令到 json 中

{
  "prepare": "husky install"
}

运行一下命令,创建一个 pre-commit 钩子

#手动运行
pnpm prepare

#添加 pre-commit 钩子
npx husky add .husky/pre-commit "npx --no-install lint-staged"

pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# 这是自己加的
echo "--------- 代码预检查 ---------"

npx --no-install lint-staged

配置 lint-staged,在 package.json 中添加下面的配置信息

//与 scripts 同一级
{
  "lint-staged": {
    "*.{js,vue,ts,jsx,tsx}": [
      "prettier --write",
      "eslint --fix"
    ],
    "*.{html,css,less,scss,md}": [
      "prettier --write"
    ]
  },
}

提交规范

引入依赖

pnpm add @commitlint/cli @commitlint/config-conventional cz-git -Dw

添加命令

{
    "type":"module",
      "scripts": {
    "cz": "git cz",
  },
      "config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  },
}

我们用它来限制不符合规范的提交信息,根目录创建commitlint.config.js文件-如果后面报错就需要将文件改为 .cjs 同时还需修改一些内容

// commitlint.config.js

/** @type {import('cz-git').UserConfig} */
export default {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "feat",
        "fix",
        "docs",
        "style",
        "refactor",
        "test",
        "build",
        "chore",
        "perf",
        "ci",
        "revert",
      ],
    ],
    "type-case": [2, "always", "lower-case"],
    "type-empty": [2, "never"],
    "subject-full-stop": [2, "never", "."],
    "header-max-length": [2, "always", 100],
    "subject-case": [
      2,
      "never",
      ["sentence-case", "start-case", "pascal-case", "upper-case"],
    ],
  },
  prompt: {
    useEmoji: true,
    allowCustomIssuePrefix: true,
    allowEmptyIssuePrefix: true,
    confirmColorize: true,
    messages: {
      type: "选择你要提交的类型 :",
      scope: "选择一个提交范围(可选):",
      customScope: "请输入自定义的提交范围 :",
      subject: "填写简短精炼的变更描述 :\n",
      body: "填写更加详细的变更描述(可选)。使用 '|' 换行 :\n",
      breaking: "列举非兼容性重大的变更(可选)。使用 '|' 换行 :\n",
      footerPrefixesSelect: "选择关联issue前缀(可选):",
      customFooterPrefix: "输入自定义issue前缀 :",
      footer: "列举关联issue (可选) 例如: #31, #I3244 :\n",
      confirmCommit: "是否提交或修改commit ?",
    },
    types: [
      {
        value: "feat",
        emoji: "✨",
        name: "feat:     新增功能 | A new feature",
      },
      { value: "fix", name: "fix:      修复缺陷 | A bug fix" },
      {
        value: "docs",
        emoji: "📚",
        name: "docs:     文档更新 | Documentation only changes",
      },
      {
        value: "style",
        emoji: "💎",
        name: "style:    代码格式 | Changes that do not affect the meaning of the code",
      },
      {
        value: "refactor",
        emoji: "📦",
        name: "refactor: 代码重构 | A code change that neither fixes a bug nor adds a feature",
      },
      {
        value: "perf",
        emoji: "🚀",
        name: "perf:     性能提升 | A code change that improves performance",
      },
      {
        value: "test",
        emoji: "🚨",
        name: "test:     测试相关 | Adding missing tests or correcting existing tests",
      },
      {
        value: "build",
        emoji: "🛠",
        name: "build:    构建相关 | Changes that affect the build system or external dependencies",
      },
      {
        value: "ci",
        emoji: "⚙️",
        name: "ci:       持续集成 | Changes to our CI configuration files and scripts",
      },
      {
        value: "revert",
        emoji: "🗑",
        name: "revert:   回退代码 | Revert to a commit",
      },
      {
        value: "chore",
        emoji: "♻️",
        name: "chore:    其他修改 | Other changes that do not modify src or test files",
      },
    ],
  },
};

使用 husky 生成 commit-msg 文件,验证提交信息

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

commit-msg

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# 自己加的
echo "--------- 执行commit-msg校验 ---------"

npx --no-install commitlint --edit $1

changeset

引入依赖并初始化

# -D 开发依赖
# -w 公共依赖
pnpm add -Dw @changesets/cli

# 初始化
pnpm changeset init

初始化后会在根目录下生成 .changeset 文件夹

其中 config.json 作为默认 changeset 配置文件

  • changelog: changelog 生成方式
  • commit: 不要让 changeset 在 publish 的时候帮我们做 git add
  • linked: 配置哪些包要共享版本
  • access: 公私有安全设定,内网建议 restricted ,开源使用 public
  • baseBranch: 项目主分支
  • updateInternalDependencies: 确保某包依赖的包发生 upgrade,该包也要发生 version upgrade 的衡量单位(量级)
  • ignore: 不需要变动 version 的包
  • ___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH: 在每次 version 变动时一定无理由 patch 抬升依赖他的那些包的版本,防止陷入 major 优先的未更新问题

changeset 常用命令及说明

# 使用 changeset 进行记录版本修改
npx changeset add

# 使用 changeset version 提交版本修改
npx changeset version

# 使用 changeset publish 进行发包
npx changeset publish

版本号一般有三个部分,以.隔开,就像 X.Y.Z,其中

  • X:主版本号,不兼容的大改动,major
  • Y:次版本号,功能性的改动,minor
  • Z:修订版本号,问题修复,patch

changeset version 提交版本修改

.npmrc

pnpm 常用

strict-peer-dependencies=false
shell-emulator=true
auto-install-peers=false
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
DvaJS 是一个基于 React 和 Redux 的轻量级框架,下面是从搭建项目开始的一些步骤: 1. 确保你已经安装了 Node.js 和 npm,如果没有安装可以到官网下载安装。安装完成后,在命令行中输入以下命令检查是否安装成功: ``` node -v npm -v ``` 2. 使用 create-react-app 创建一个新的 React 项目。在命令行中输入以下命令: ``` npx create-react-app my-dva-app ``` 这将会创建一个名为 `my-dva-app` 的新项目。 3. 在项目目录中安装 dva 和 react-router-dom。在命令行中输入以下命令: ``` cd my-dva-app npm install dva react-router-dom --save ``` 4. 在 src 目录下创建一个名为 `index.js` 的文件,并添加以下代码: ```javascript import dva from 'dva'; import './index.css'; // 1. Initialize const app = dva(); // 2. Plugins // app.use({}); // 3. Model // app.model(require('./models/example').default); // 4. Router app.router(require('./router').default); // 5. Start app.start('#root'); ``` 5. 在 src 目录下创建一个名为 `router.js` 的文件,并添加以下代码: ```javascript import React from 'react'; import { Router, Route } from 'dva/router'; import ExamplePage from './components/ExamplePage'; function RouterConfig({ history }) { return ( <Router history={history}> <Route path="/" component={ExamplePage} /> </Router> ); } export default RouterConfig; ``` 6. 在 src 目录下创建一个名为 `components/ExamplePage.js` 的文件,并添加以下代码: ```javascript import React from 'react'; class ExamplePage extends React.Component { render() { return ( <div> <h1>Hello, DvaJS!</h1> </div> ); } } export default ExamplePage; ``` 7. 在命令行中输入以下命令启动项目: ``` npm start ``` 你现在应该可以在浏览器中看到一个显示 "Hello, DvaJS!" 的页面了。 以上就是从搭建项目开始的一些步骤。当然,这只是一个简单的例子,如果你需要更复杂的项目结构和功能,你需要更多的学习和实践。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

画一个圆_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值