【Vue3项目实战系列一】—— package.json配置文件详细说明 配置指南 帮助你全面了解 package.json 的结构和功能，并学会如何根据项目需求定制脚本命令

😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。
👉 关于【Vue3项目实战系列】专栏，本专栏旨在帮助新人粉丝全面快速的掌握vue3开发技术，在接下来的日子里我带着大家从零开始一个vue3项目，项目包含了框架搭建，用户登录，用户权限，表格增删改查，表单验证，等一套完整的用户管理系统的实践开发，学完可以帮助前端新人至少拥有一年工作经验，本专栏完全免费，欢迎关注并订阅！🎈
🎯如果你有任何困惑或疑问欢迎评论区给我留言哦，我收到后会第一时间为你答疑解惑😉

引言

package.json 是 Node.js 项目的配置文件，它包含了项目的元数据、依赖项、脚本命令等信息。对于 Vue 3 项目来说，package.json 文件不仅定义了项目的依赖关系，还通过 scripts 字段提供了各种自动化任务的入口。本文将详细介绍 package.json 文件的内容，并探讨如何在 scripts 中实现更多自定义配置。

package.json 文件内容解析

{
  "name": "vue3-js-demo",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix"
  },
  "dependencies": {
    "pinia": "^2.2.6",
    "vue": "^3.5.13",
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@eslint/js": "^9.14.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vitejs/plugin-vue-jsx": "^4.1.1",
    "eslint": "^9.14.0",
    "eslint-plugin-vue": "^9.30.0",
    "vite": "^6.0.1",
    "vite-plugin-vue-devtools": "^7.6.5"
  }
}

name：

项目的名称，这里是 vue3-js-demo。

version：

项目的版本号，当前为 0.0.0。通常遵循语义化版本控制（SemVer）。

private：

设置为 true 表示该包是私有的，不会被发布到 npm 注册表。

type：

指定模块系统为 ESM（ECMAScript Modules），即使用 import/export 语法。

scripts：

定义了一系列可以在命令行中运行的任务。这是我们将重点讨论的部分。

dependencies：

列出项目运行时所需的依赖包及其版本范围。

devDependencies：

列出开发过程中所需的工具和库，如构建工具、测试框架、代码检查工具等。

scripts 的详细说明与自定义配置

scripts 字段允许你定义可以由 npm run 或 yarn 执行的任务。每个键值对表示一个命令，键是命令名，值是实际执行的命令。以下是您现有的脚本命令解释以及如何扩展它们：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "lint": "eslint . --fix"
}

当前配置说明

dev：

启动 Vite 开发服务器，用于本地开发。

build：

使用 Vite 构建项目俗称打包，生成生产环境下的静态资源。

preview：

启动 Vite 预览服务器，用于查看构建后的结果。

lint：

运行 ESLint 检查并自动修复问题。

实现更多自定义配置

你可以通过添加新的脚本或组合现有命令来创建更复杂的任务。以下是一些常见的扩展方式：

格式化代码（Prettier）：

如果你使用 Prettier 来格式化代码，可以添加一个新的脚本来运行 Prettier。

"format": "prettier --write ."

测试（Jest 或 Vitest）：

如果你的项目包含单元测试或端到端测试，可以添加相应的测试命令。

"test:unit": "vitest",
"test:e2e": "cypress run"

清理构建目录：

在构建之前清理旧的构建文件可以确保没有残留文件影响新构建。

"clean": "rimraf dist",
"build": "npm run clean && vite build"

预提交钩子（Husky + lint-staged）：

使用 Husky 和 lint-staged 可以在每次提交代码前自动运行 ESLint 和 Prettier。

"prepare": "husky install",
"lint-staged": "lint-staged"

部署（Netlify, Vercel, GitHub Pages 等）：

添加部署命令，例如使用 Netlify CLI 部署。

"deploy": "netlify deploy --prod"

并发任务（concurrently 或 nx）：

如果你需要同时运行多个任务（如启动开发服务器和监视样式更改），可以使用 concurrently 或其他类似的工具。

"start": "concurrently \"npm run dev\" \"sass --watch src/scss:src/css\"",

文档生成（Vuese 或 Storybook）：

如果你维护 API 文档或组件库文档，可以添加生成文档的命令。

"docs": "vuese --output ./docs",
"storybook": "start-storybook -p 6006"

安全扫描（npx audit）：

定期检查项目中的依赖是否存在已知的安全漏洞。

"audit": "npm audit --production"

类型检查（TypeScript）：

如果你的项目使用 TypeScript，可以添加类型检查命令。

"tsc": "tsc --noEmit"

多步骤任务（复合命令）：

使用 `&&` 或 `;` 连接多个命令，创建一个多步骤的任务。

```json
"prepare-release": "npm run lint && npm test && npm run build"
```

综合示例：

{
  "name": "vue3-js-demo",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "npm run clean && vite build",
    "preview": "vite preview",
    "lint": "eslint . --fix",
    "format": "prettier --write .",
    "test:unit": "vitest",
    "test:e2e": "cypress run",
    "clean": "rimraf dist",
    "prepare": "husky install",
    "lint-staged": "lint-staged",
    "deploy": "netlify deploy --prod",
    "start": "concurrently \"npm run dev\" \"sass --watch src/scss:src/css\"",
    "docs": "vuese --output ./docs",
    "storybook": "start-storybook -p 6006",
    "audit": "npm audit --production",
    "tsc": "tsc --noEmit",
    "prepare-release": "npm run lint && npm test && npm run build"
  },
  "dependencies": {
    "pinia": "^2.2.6",
    "vue": "^3.5.13",
    "vue-router": "^4.4.5"
  },
  "devDependencies": {
    "@eslint/js": "^9.14.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vitejs/plugin-vue-jsx": "^4.1.1",
    "eslint": "^9.14.0",
    "eslint-plugin-vue": "^9.30.0",
    "vite": "^6.0.1",
    "vite-plugin-vue-devtools": "^7.6.5",
    "prettier": "^2.8.8", // 新增 Prettier 作为格式化工具
    "husky": "^8.0.0", // 新增 Husky 用于 Git 钩子
    "lint-staged": "^13.0.0", // 新增 lint-staged 用于预提交钩子
    "rimraf": "^5.0.0", // 新增 rimraf 用于清理命令
    "concurrently": "^7.0.0", // 新增 concurrently 用于并发任务
    "vitest": "^0.34.0", // 新增 Vitest 用于单元测试
    "cypress": "^12.0.0", // 新增 Cypress 用于端到端测试
    "vuese": "^2.3.0", // 新增 Vuese 用于生成 API 文档
    "storybook": "^7.0.0" // 新增 Storybook 用于组件库文档
  }
}

总结

通过合理配置 package.json 文件中的 scripts 字段，你可以极大地简化日常开发任务，并提高项目的自动化程度。以上介绍了一些常见的扩展方式，帮助你在 Vue 3 项目中实现更多的自定义配置。希望这些信息能为你提供有价值的参考，让你更好地管理和优化你的项目。

如果有更多问题或需要进一步的帮助，请在评论区留言告诉我！编码愉快！