vue-vben-admin框架学习(一)-package.json

前言

初次接触前端开发还是2017年,那时还是vue2和js, 换过工作之后，前端就没有再开发了。现在vue3和ts大行其道, 随着AI浪潮的到来, 可以结合前端做一些有意思的工具,所以需要重新学习前端。

目前正在学习vue-vben-admin框架, 记录一下学习过程。本章主要介绍package.json

代码结构

package.json

vue-vben-admin框架的package.json如下:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122


{
  "name": "vben-admin-monorepo",
  "version": "5.5.5",
  "private": true,
  "keywords": [
    "monorepo",
    "turbo",
    "vben",
    "vben admin",
    "vben pro",
    "vue",
    "vue admin",
    "vue vben admin",
    "vue vben admin pro",
    "vue3"
  ],
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": "vbenjs/vue-vben-admin.git",
  "license": "MIT",
  "author": {
    "name": "vben",
    "email": "ann.vben@gmail.com",
    "url": "https://github.com/anncwb"
  },
  "type": "module",
  "scripts": {
    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
    "build:analyze": "turbo build:analyze",
    "build:antd": "pnpm run build --filter=@vben/web-antd",
    "build:docker": "./scripts/deploy/build-local-docker-image.sh",
    "build:docs": "pnpm run build --filter=@vben/docs",
    "build:ele": "pnpm run build --filter=@vben/web-ele",
    "build:naive": "pnpm run build --filter=@vben/web-naive",
    "build:play": "pnpm run build --filter=@vben/playground",
    "changeset": "pnpm exec changeset",
    "check": "pnpm run check:circular && pnpm run check:dep && pnpm run check:type && pnpm check:cspell",
    "check:circular": "vsh check-circular",
    "check:cspell": "cspell lint **/*.ts **/README.md .changeset/*.md --no-progress",
    "check:dep": "vsh check-dep",
    "check:type": "turbo run typecheck",
    "clean": "node ./scripts/clean.mjs",
    "commit": "czg",
    "dev": "turbo-run dev",
    "dev:antd": "pnpm -F @vben/web-antd run dev",
    "dev:docs": "pnpm -F @vben/docs run dev",
    "dev:ele": "pnpm -F @vben/web-ele run dev",
    "dev:naive": "pnpm -F @vben/web-naive run dev",
    "dev:play": "pnpm -F @vben/playground run dev",
    "format": "vsh lint --format",
    "lint": "vsh lint",
    "postinstall": "pnpm -r run stub --if-present",
    "preinstall": "npx only-allow pnpm",
    "prepare": "is-ci || husky",
    "preview": "turbo-run preview",
    "publint": "vsh publint",
    "reinstall": "pnpm clean --del-lock && pnpm install",
    "test:unit": "vitest run --dom",
    "test:e2e": "turbo run test:e2e",
    "update:deps": "npx taze -r -w",
    "version": "pnpm exec changeset version && pnpm install --no-frozen-lockfile"
  },
  "devDependencies": {
    "@changesets/changelog-github": "catalog:",
    "@changesets/cli": "catalog:",
    "@playwright/test": "catalog:",
    "@types/node": "catalog:",
    "@vben/commitlint-config": "workspace:*",
    "@vben/eslint-config": "workspace:*",
    "@vben/prettier-config": "workspace:*",
    "@vben/stylelint-config": "workspace:*",
    "@vben/tailwind-config": "workspace:*",
    "@vben/tsconfig": "workspace:*",
    "@vben/turbo-run": "workspace:*",
    "@vben/vite-config": "workspace:*",
    "@vben/vsh": "workspace:*",
    "@vitejs/plugin-vue": "catalog:",
    "@vitejs/plugin-vue-jsx": "catalog:",
    "@vue/test-utils": "catalog:",
    "autoprefixer": "catalog:",
    "cross-env": "catalog:",
    "cspell": "catalog:",
    "happy-dom": "catalog:",
    "husky": "catalog:",
    "is-ci": "catalog:",
    "lint-staged": "catalog:",
    "playwright": "catalog:",
    "rimraf": "catalog:",
    "tailwindcss": "catalog:",
    "turbo": "catalog:",
    "typescript": "catalog:",
    "unbuild": "catalog:",
    "vite": "catalog:",
    "vitest": "catalog:",
    "vue": "catalog:",
    "vue-tsc": "catalog:"
  },
  "engines": {
    "node": ">=20.10.0",
    "pnpm": ">=9.12.0"
  },
  "packageManager": "pnpm@10.10.0",
  "pnpm": {
    "peerDependencyRules": {
      "allowedVersions": {
        "eslint": "*"
      }
    },
    "overrides": {
      "@ast-grep/napi": "catalog:",
      "@ctrl/tinycolor": "catalog:",
      "clsx": "catalog:",
      "esbuild": "0.25.3",
      "pinia": "catalog:",
      "vue": "catalog:"
    },
    "neverBuiltDependencies": [
      "canvas",
      "node-gyp"
    ]
  }
}

对package.json的字段需要进行说明：

name: 项目名称,要少于214个字符,不能大写开头和使用node的核心库名, 可以使用点和下划线开头。
version: 项目版本, 和name一起确定一个项目, 不能重复。
private: 是否为私有项目, 如果为true, 则不会被发布到npm上。
keywords: 项目关键字, 用于npm search搜索。
homepage: 项目主页
bugs: 项目问题地址
repository: 项目仓库
license: 项目许可证, 可以是MIT, Apache-2.0, GPL-3.0等。许可查询地址:license
author: 项目作者
type: 项目类型,可以是module, commonjs, none等。
scripts: 项目脚本
devDependencies: 项目开发依赖,不想安装额外的test或者文档框架,可以在这里添加。
engines: 项目引擎, 可以指定node和pnpm的版本。
packageManager: 项目包管理器
pnpm: 项目包管理器配置
- peerDependencyRules: 项目依赖规则
- overrides: 项目依赖覆盖
- neverBuiltDependencies: 项目不需要构建的依赖,安装期间不会执行所列包的preinstall,install和postinstall脚本。

官方package.json文档地址:package.json
官方script脚本参数:scripts
官方pnpm文档:pnpm

工作空间

在devDependencies里, 可以看到依赖的服务版本有两种方式, 一种是catalog:的方式, 一种是workspace:*的方式。这两个依赖的具体版本是在pnpm-workspace.yaml文件中定义的。 pnpm-workspace.yaml文件如下:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192


packages:
  - internal/*
  - internal/lint-configs/*
  - packages/*
  - packages/@core/base/*
  - packages/@core/ui-kit/*
  - packages/@core/forward/*
  - packages/@core/*
  - packages/effects/*
  - packages/business/*
  - apps/*
  - scripts/*
  - docs
  - playground
catalog:
  '@ast-grep/napi': ^0.37.0
  '@changesets/changelog-github': ^0.5.1
  '@changesets/cli': ^2.29.2
  '@changesets/git': ^3.0.4
  '@clack/prompts': ^0.10.1
  '@commitlint/cli': ^19.8.0
  '@commitlint/config-conventional': ^19.8.0
  '@ctrl/tinycolor': ^4.1.0
  '@eslint/js': ^9.25.1
  '@faker-js/faker': ^9.7.0
  '@iconify/json': ^2.2.332
  '@iconify/tailwind': ^1.2.0
  '@iconify/vue': ^4.3.0
  '@intlify/core-base': ^11.1.3
  '@intlify/unplugin-vue-i18n': ^6.0.8
  '@jspm/generator': ^2.5.1
  '@manypkg/get-packages': ^2.2.2
  '@nolebase/vitepress-plugin-git-changelog': ^2.17.0
  '@playwright/test': ^1.52.0
  '@pnpm/workspace.read-manifest': ^1000.1.4
  '@stylistic/stylelint-plugin': ^3.1.2
  '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
  '@tailwindcss/typography': ^0.5.16
  '@tanstack/vue-query': ^5.74.7
  '@tanstack/vue-store': ^0.7.0
  '@types/archiver': ^6.0.3
  '@types/eslint': ^9.6.1
  '@types/html-minifier-terser': ^7.0.2
  '@types/jsonwebtoken': ^9.0.9
  '@types/lodash.clonedeep': ^4.5.9
  '@types/lodash.get': ^4.4.9
  '@types/lodash.isequal': ^4.5.8
  '@types/lodash.set': ^4.3.9
  '@types/node': ^22.15.2
  '@types/nprogress': ^0.2.3
  '@types/postcss-import': ^14.0.3
  '@types/qrcode': ^1.5.5
  '@types/qs': ^6.9.18
  '@types/sortablejs': ^1.15.8
  '@typescript-eslint/eslint-plugin': ^8.31.0
  '@typescript-eslint/parser': ^8.31.0
  '@vee-validate/zod': ^4.15.0
  '@vite-pwa/vitepress': ^1.0.0
  '@vitejs/plugin-vue': ^5.2.3
  '@vitejs/plugin-vue-jsx': ^4.1.2
  '@vue/reactivity': ^3.5.13
  '@vue/shared': ^3.5.13
  '@vue/test-utils': ^2.4.6
  '@vueuse/core': ^13.1.0
  '@vueuse/motion': ^3.0.3
  '@vueuse/integrations': ^13.1.0
  ant-design-vue: ^4.2.6
  archiver: ^7.0.1
  autoprefixer: ^10.4.21
  axios: ^1.9.0
  axios-mock-adapter: ^2.1.0
  cac: ^6.7.14
  chalk: ^5.4.1
  cheerio: ^1.0.0
  circular-dependency-scanner: ^2.3.0
  class-variance-authority: ^0.7.1
  clsx: ^2.1.1
  commitlint-plugin-function-rules: ^4.0.1
  consola: ^3.4.2
  cross-env: ^7.0.3
  cspell: ^8.19.3
  cssnano: ^7.0.6
  cz-git: ^1.11.1
  czg: ^1.11.1
  dayjs: ^1.11.13
  defu: ^6.1.4
  depcheck: ^1.4.7
  dotenv: ^16.5.0
  echarts: ^5.6.0
  element-plus: ^2.9.9
  eslint: ^9.25.1
  eslint-config-turbo: ^2.5.2
  eslint-plugin-command: ^3.2.0
  eslint-plugin-eslint-comments: ^3.2.0
  eslint-plugin-import-x: ^4.11.0
  eslint-plugin-jsdoc: ^50.6.11
  eslint-plugin-jsonc: ^2.20.0
  eslint-plugin-n: ^17.17.0
  eslint-plugin-no-only-tests: ^3.3.0
  eslint-plugin-perfectionist: ^4.12.3
  eslint-plugin-prettier: ^5.2.6
  eslint-plugin-regexp: ^2.7.0
  eslint-plugin-unicorn: ^59.0.0
  eslint-plugin-unused-imports: ^4.1.4
  eslint-plugin-vitest: ^0.5.4
  eslint-plugin-vue: ^10.0.0
  execa: ^9.5.2
  find-up: ^7.0.0
  get-port: ^7.1.0
  globals: ^16.0.0
  h3: ^1.15.3
  happy-dom: ^17.4.4
  html-minifier-terser: ^7.2.0
  husky: ^9.1.7
  is-ci: ^4.1.0
  jsonc-eslint-parser: ^2.4.0
  jsonwebtoken: ^9.0.2
  lint-staged: ^15.5.1
  lodash.clonedeep: ^4.5.0
  lodash.get: ^4.4.2
  lodash.set: ^4.3.2
  lodash.isequal: ^4.5.0
  lucide-vue-next: ^0.503.0
  medium-zoom: ^1.1.0
  naive-ui: ^2.41.0
  nitropack: ^2.11.11
  nprogress: ^0.2.0
  ora: ^8.2.0
  pinia: ^3.0.2
  pinia-plugin-persistedstate: ^4.2.0
  pkg-types: ^2.1.0
  playwright: ^1.52.0
  postcss: ^8.5.3
  postcss-antd-fixes: ^0.2.0
  postcss-html: ^1.8.0
  postcss-import: ^16.1.0
  postcss-preset-env: ^10.1.6
  postcss-scss: ^4.0.9
  prettier: ^3.5.3
  prettier-plugin-tailwindcss: ^0.6.11
  publint: ^0.3.12
  qrcode: ^1.5.4
  qs: ^6.14.0
  radix-vue: ^1.9.17
  resolve.exports: ^2.0.3
  rimraf: ^6.0.1
  rollup: ^4.40.0
  rollup-plugin-visualizer: ^5.14.0
  sass: ^1.87.0
  secure-ls: ^2.0.0
  sortablejs: ^1.15.6
  stylelint: ^16.19.1
  stylelint-config-recess-order: ^6.0.0
  stylelint-config-recommended: ^16.0.0
  stylelint-config-recommended-scss: ^14.1.0
  stylelint-config-recommended-vue: ^1.6.0
  stylelint-config-standard: ^38.0.0
  stylelint-order: ^7.0.0
  stylelint-prettier: ^5.0.3
  stylelint-scss: ^6.11.1
  tailwind-merge: ^2.6.0
  tailwindcss: ^3.4.17
  tailwindcss-animate: ^1.0.7
  theme-colors: ^0.1.0
  tippy.js: ^6.3.7
  turbo: ^2.5.2
  typescript: ^5.8.3
  unbuild: ^3.5.0
  unplugin-element-plus: ^0.10.0
  vee-validate: ^4.15.0
  vite: ^6.3.3
  vite-plugin-compression: ^0.5.1
  vite-plugin-dts: ^4.5.3
  vite-plugin-html: ^3.2.2
  vite-plugin-lazy-import: ^1.0.7
  vite-plugin-pwa: ^1.0.0
  vite-plugin-vue-devtools: ^7.7.6
  vitepress: ^1.6.3
  vitepress-plugin-group-icons: ^1.5.2
  vitest: ^3.1.2
  vue: ^3.5.13
  vue-eslint-parser: ^10.1.3
  vue-i18n: ^11.1.3
  vue-json-viewer: ^3.0.4
  vue-router: ^4.5.1
  vue-tippy: ^6.7.0
  vue-tsc: 2.1.10
  vxe-pc-ui: ^4.5.14
  vxe-table: ^4.13.14
  watermark-js-plus: ^1.6.0
  zod: ^3.24.3
  zod-defaults: ^0.1.3

workspace:*: 用的是以@vben/开头的依赖, 这些包在internal/*和scripts/*目录下
catalog:: 用的是第三方依赖

scripts

package.json里的scripts字段是项目的脚本, 可以在命令行中执行。在本项目中, 常用的脚本有:

dev: 启动开发服务器
build: 构建项目
test: 运行测试
lint: 检查代码格式
format: 格式化代码
version: 版本管理
commit: 提交代码

官方scripts的使用文档：scripts, 比较重要的有生命周期脚本：

pre<event>: event事件前执行的脚本, 如preinstall在安装前执行。
event: 事件脚本, 如install在安装时执行。
post<event>: event事件后执行的脚本, 如postinstall在安装后执行。

本项目中，当运行pnpm install时，具体执行顺序如下:

执行preinstall脚本(npx only-allow pnpm)
执行install脚本
执行postinstall脚本(pnpm -r run stub --if-present)
- pnpm -r run stub --if-present会找本项目下的所有包的package.json, 如果有stub脚本, 则执行。
- stub脚本会在package.json的scripts字段中定义, 如下:
  1 2 3
  
  "scripts": { "stub": "pnpm unbuild --stub" }
- 找到的包有很多，比如:internal/lint-configs/eslint-config执行pnpm unbuild --stub unbuild是打包工具,会生成cjs和mjs到dist目录下
执行prepare脚本(is-ci || husky)
- is-ci是判断是否在CI环境下
- husky是git的钩子工具, 可以在git提交前执行一些脚本, 如:格式化代码. 本项目配置在.husky/*目录下, 具体有三个文件:
  - commit-msg是在提交消息前执行的脚本:
  1 2 3 4
  
  echo Start running commit-msg hook... # Check whether the git commit information is standardized pnpm exec commitlint --edit "$1" echo Run commit-msg hook done.
  - post-merge是在合并分支后执行的脚本, 如:检查代码格式是否正确。
  1
  
  pnpm install
  - pre-commit是在提交前执行的脚本, 如:检查代码格式是否正确。
  1 2 3 4
  
  pnpm vsh code-workspace --auto-commit # Format and submit code according to lintstagedrc.js configuration pnpm exec lint-staged echo Run pre-commit hook done.