网站导航
> 技术文档 > 彻底搞懂 package.json：前端项目的“身份证”

彻底搞懂 package.json：前端项目的“身份证”

网友: 技术文档 2025-07-30 11:43:28

目录

彻底搞懂 package.json：前端项目的“身份证”

一、什么是 package.json？

二、dependencies 与 devDependencies 区别

1、dependencies 与 devDependencies 对比

2、版本号符号 ^ 和 ~ 的区别

三、scripts 脚本机制：一键构建、启动、测试

四、其他常见字段介绍 

五、结语

        作者：watermelo37

        CSDN全栈领域优质创作者、万粉博主、华为云云享专家、阿里云专家博主、腾讯云“创作之星”特邀作者、支付宝合作作者，全平台博客昵称watermelo37。

        一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，Java、Docker、Python、LLM均有涉猎。

---------------------------------------------------------------------

温柔地对待温柔的人，包容的三观就是最大的温柔。

---------------------------------------------------------------------

彻底搞懂 package.json：前端项目的“身份证”

        无论你是前端开发新手还是资深工程师，package.json 都是 Node.js 与前端项目不可或缺的一部分。它不仅仅是一个记录依赖的文件，更是一个项目的元信息中心、依赖声明文件、任务脚本配置器。本文将带你系统了解它的组成与使用技巧，帮助你更好地管理前端项目。

一、什么是 package.json？

        简单来说，package.json 是 Node.js 项目的配置描述文件。它就像是 Java 的 pom.xml、Python 的 requirements.txt + setup.py、Rust 的 Cargo.toml，主要起到以下几个作用：

  • 描述项目的基本信息（如名称、版本）

  • 定义依赖包及其版本

  • 声明运行/构建/测试脚本

  • 设定入口文件、模块导出等打包逻辑

  • 提供项目私有配置（如 browserslist、eslintConfig 等）

二、dependencies 与 devDependencies 区别

1、dependencies 与 devDependencies 对比

        这是最常见也最容易混淆的一对配置项。

配置项 用途 安装时机

dependencies

项目运行时所需的依赖 部署或生产环境必装

devDependencies

项目开发时所需的依赖 开发环境使用

         举个例子vue3+vite的例子：vue 是运行时必须的，因此放在 dependencies。vite 是构建工具，只在本地开发用到，放在 devDependencies。

{ \"dependencies\": { \"vue\": \"^3.4.0\", \"axios\": \"^1.3.0\" }, \"devDependencies\": { \"vite\": \"^5.0.0\", \"eslint\": \"^8.0.0\" }}

2、版本号符号 ^ 和 ~ 的区别

        在 dependencies 中你常见到版本前加 ^ 或 ~：

  • ^1.2.3：允许 升级次版本和修订版本，但不变主版本（即 <2.0.0）

  • ~1.2.3：只允许 升级修订版本，不变次版本（即 <1.3.0）

表达式 允许范围 实际作用 ^1.2.3 >=1.2.3 <2.0.0 安全升级，只要不变主版本（API不破坏） ~1.2.3 >=1.2.3 <1.3.0 更谨慎的升级，仅限修复 bug 的小版本 1.2.3 只允许这个版本 完全固定，最稳定但无升级（不推荐除非特殊需求）

三、scripts 脚本机制：一键构建、启动、测试

        scripts 字段允许你通过命令行轻松执行项目脚本。例如：

\"scripts\": { \"dev\": \"vite\", \"build\": \"vite build\", \"lint\": \"eslint src/\", \"preview\": \"vite preview\"}

        使用方式：

npm run dev # 启动本地服务npm run build # 打包生产代码npm run lint # 执行 ESLint 代码检查

        你也可以写一些自定义逻辑，以此来方便的调用你常用的指令：

\"scripts\": { \"clean\": \"rm -rf dist\", \"prepare\": \"husky install\"}

四、其他常见字段介绍 

{ \"name\": \"my-app\", // 包名 \"version\": \"1.0.0\",  // 版本号 \"main\": \"index.js\",  // 模块入口 \"module\": \"index.mjs\", // ESModule 入口 \"type\": \"module\", // 类型: \"module\" or \"commonjs\" \"license\": \"MIT\", // 许可证 \"private\": true,  // 是否私有（true 不会被 publish） \"browserslist\": [\">0.2%\", \"not dead\", \"not op_mini all\"], // 前端兼容配置 \"engines\": { \"node\": \">=16.0.0\" }, \"exports\": { \".\": { \"import\": \"./dist/index.es.js\", \"require\": \"./dist/index.cjs.js\" } }}

五、结语

        package.json 不只是依赖列表，更是前端项目的核心配置文件。掌握它的结构和用法，对构建高质量、可维护的项目至关重要。需要知道它的基本组成（name、version、scripts、dependencies）、理解依赖分类（运行 vs 开发）、 会使用 ^、~ 精准控制依赖版本、掌握任务自动化（scripts）与打包配置（main、exports）

        只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

        其他热门文章，请关注：

        极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图

        你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解

        DeepSeek：全栈开发者视角下的AI革命者

        通过array.filter()实现数组的数据筛选、数据清洗和链式调用

        通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能

        TreeSize：免费的磁盘清理与管理神器，解决C盘爆满的燃眉之急

        通过MongoDB Atlas 实现语义搜索与 RAG——迈向AI的搜索机制

        深入理解 JavaScript 中的 Array.find() 方法：原理、性能优势与实用案例详解

        前端实战：基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略

        el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能

        JavaScript双问号操作符（??）详解，解决使用 || 时因类型转换带来的问题

        MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver

        JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、DOM操作等

        内存泄漏——海量数据背后隐藏的项目生产环境崩溃风险！如何避免内存泄漏

        高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图

      【前端实战】如何让用户回到上次阅读的位置？

网络标签：

相关问题