如何配置package.json

最新推荐文章于 2024-08-29 08:00:00 发布
最新推荐文章于 2024-08-29 08:00:00 发布
阅读量409 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 打包 笔记 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Eric_web/article/details/127089952
本文详细解析了npm中的devDependencies、dependencies及peerDependencies的区别与用途。解释了如何正确配置这些依赖以减小最终打包文件的大小，并介绍了peerDependencies如何帮助解决依赖冲突问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

devDependencies：

本地开发过程中的依赖，不会打包到最终的bundle中去，线上环境不依赖的库，都可以放在此处

dependencies

无论是本地开发，还是最终的线上版本都会用到的依赖，会打包到最终的bundle中去（当然你也可以通过webpack的配置来设置某些包为外部依赖，这样也不会被打包到最终bundle中）
一般核心库都需要放在此处，线上环境依赖的库，都需要放在此处

peerDependencies

peerDependencies是用来解决重复依赖的问题

总结
大家在使用依赖库的时候，一定要注意依赖库配置的位置，错误的配置会导致最终的bundle变大，而peerDependencies则可以解决依赖库重复打包的问题，并且还能解决公共npm版本不一致的问题

参考文档
https://nodejs.org/en/blog/npm/peer-dependencies/
http://nodejs.cn/learn/the-package-json-guide

uni-app通过配置package.json实现环境变量、自定义条件编译
m0_67584973的博客
06-28 3215
uni-app官方概括官方文档在开发web时，有时需要一套代码编译发布到不同的站点，比如主站和微信h5站。（注意不是一套代码内部自适应不同浏览器，是真的分离部署了不同的网站）在开发小程序时，经常有扩展小程序平台，比如基于阿里小程序的钉钉小程序、淘宝小程序。uni-app 通过在文件中增加uni-app扩展节点，可实现自定义条件编译平台。扩展平台后有3点影响可以在代码里编写自定义的条件编译，为这个新平台编写专用代码运行时可以执行面向新平台的编译运行发行时可以执行面向新平台的编译发行。
package.json配置详解
pipidog008的博客
02-03 1万+
npm是随同Node.js一起安装的包管理工具,能解决Node.jsNPMNPMNPM在现在的前端世界里,几乎已经离不开npm了,其提供的依赖安装、卸载、升级、发布等一条龙服务,使我们在日常的开发效率提升了不少。npm制定了一个包规范,所谓规范就是一些格式和约定,比如作为一个npm包中根目录必须包含一个文件,并约定从文件里读取这个包的所有信息,包括它的名字、版本号、它依赖于哪些别的包等;并且创建一个目录专门用来存放第三方依赖,Node为此提供的支持是内置的require()
package.json的配置
蓝冰凌的博客
05-27 1270
文件是Node.js项目中的一个重要配置文件，用于存储项目的元数据和各种配置信息。
package.json 配置完全解读
JackChan
09-18 5603
package.json 配置完全解读
npm中的.package-lock.json包管理配置文件 package.json自己创建的包配置文件（npm init -y）
weixin_47295886的博客
09-01 773
即可用来记录项目中安装了哪些包，从而方便在我们剔除node_modules目录之后。-------------------根据这个安装包。会出现这种情况：整个项目的体积是30M 第三方包即node_modules文件夹的体积是28M，所以我们项目源代码才2M——.package-lock.json包管理配置文件,是npm官方规定的必须提供的，用来记录与项目有关的一些配置的信息。（记录项目中安装了哪些包）解决方案： 在项目根目录中，创建一个。——在执行命令所处的目录中，快速新建。...
package.json配置解读之进阶
山山而川~
01-07 2326
package.json是每个前端项目都会有的json文件，位于项目的根目录中。很多脚手架在创建项目的时候会帮我们自动初始化好 package.json。package.json有许多配置与项目息息相关，了解他们有助于对项目的开发，上一篇文章已经完成 package.json 的基础配置的讲解，接下来开始剩余部分的学习。
merge-package.json:使用本地，基本和远程合并package.json
05-12
merge-package.json 使用本地，基本和远程合并package.json 保留订购 关注SemVer 使用最佳猜测来解决冲突 const mergePackageJson = require ( 'merge-package.json' ) ; let merged = mergePackageJson ( local ...
package.json文件配置详解
01-20
`package.json` 文件是Node.js项目的核心配置文件，它包含了项目的元数据，如项目名称、版本、描述，以及项目依赖的模块等信息。通过 `npm init` 命令，可以自动生成此文件。理解并正确配置 `package.json` 对于有效...
package.json中main，module，exports三种方式的使用，自定义入口文件index.js
05-07
在JavaScript的模块化开发中，`package.json` 文件起着至关重要的作用，它定义了项目的元数据，并指定了模块的入口文件。对于Vue.js项目，尤其是由`@vue/cli`生成的Vue3项目，`package.json`中的`main`、`module`和`...
package.json中homepage属性的作用详解
10-15
在JavaScript的开源世界中，`package.json` 文件是项目的核心组成部分，它包含了项目的元数据，如项目名称、版本、描述等。其中，`homepage` 属性是一个常常被忽视但至关重要的配置项。本文将深入探讨 `package.json...
package.json文件里面的解读
qq_44457229的博客
03-15 2452
B@2.x。
深入理解 package.json的配置文件
码农研究僧的博客
08-29 2955
一个 JSON 格式的配置文件，位于 Node.js 项目的根目录下，包含项目的基本信息、依赖关系、脚本、版本等内容 一般分为几个部分：项目元数据、脚本、依赖关系、配置等
npm package.json 文件中的依赖项、devDependencies 和 peerDependencies 有什么区别？
HuntsBot的博客
12-31 1270
This documentation 对我的问题的回答很差。我不明白那些解释。有人能用更简单的话说吗？如果很难选择简单的单词，也许有例子？EDIT 还添加了 peerDependencies，它密切相关，可能会引起混淆。
package.json配置
qq_18231839的博客
07-08 4968
package.json配置选项记录，使用心得
npm 与 package.json 快速入门教程
热门推荐
张拭心的博客 shixinzhang
08-02 11万+
npm 是前端开发广泛使用的包管理工具，之前使用 Weex 时看了阮一峰前辈的文章了解了一些，这次结合官方文章总结一下，加深下理解吧！ 读完本文你将了解： 什么是 npm？ 安装 npm 更新 npm package.json 文件 package.json 如何创建 package.json 的内容 指定依赖的包 Semantic versioning（语义化版本规则） 安装 pac...
package.json字段全解
清箫的专栏
09-15 9万+
Name 必须字段。 小提示： l  不要在name中包含js, node字样； l  这个名字最终会是URL的一部分，命令行的参数，目录名，所以不能以点号或下划线开头； l  这个名字可能在require()方法中被调用，所以应该尽可能短； Version 必须字段。 Description 可选字段，必须是字符串。npm search的时候会用到。 Keywords 可选
配置package.json
最新发布
01-17
### 正确配置 `package.json` 文件 为了确保项目能够被正确安装和使用，在 `package.json` 中合理设置各个字段至关重要。对于一个基于 Rollup 构建并希望支持多种模块系统的库来说，可以按照如下方式来构建此文件： #### 基础信息定义 - **名称(name)** 和 **版本(version)** 是必不可少的基础元数据项，它们分别指定了项目的唯一标识符及其当前发布的具体迭代号。 ```json { "name": "my-library", "version": "1.0.0" } ``` #### 主入口(main)与现代模块(module) 为了让不同环境下的应用都能顺利引入该库，应当指定两个不同的出口路径——一个是遵循 CommonJS 规范的 `.cjs.js` 文件作为默认加载选项；另一个则是采用 ES Modules 的 `.esm.js` 版本供兼容浏览器直接调用[^3]。 ```json { "main": "dist/my-library.cjs.js", // CommonJS 格式 "module": "dist/my-library.esm.js" // ES Module 格式 } ``` #### 配置参数(config) 如果脚本运行过程中需要用到某些预设好的变量值，则可以通过 config 来传递这些静态配置项给命令行工具或其他自动化流程处理程序[^1]。 ```json { "config": { "port": "8080" } } ``` #### 发布前验证(package name check) 在准备向 NPM 注册表提交新软件包之前，建议先通过官方提供的搜索接口确认目标命名空间尚未被人占用，以免造成冲突或误解[^2]。 ```bash npm search <ModuleName> ``` 综上所述，一份完整的 `package.json` 应当综合考虑以上各个方面的需求，并据此作出适当调整以适应实际应用场景的要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值