本文共 1678 字，大约阅读时间需要 5 分钟。

在项目开发过程中，npm包的存储位置和依赖管理是一个需要注意的重点。开发者常常会遇到关于-save-dev和-save以及devDependencies与dependencies之间区别的疑惑。本文将通过实际操作和测试，帮助开发者更好地理解这些概念。

1. npm依赖存储的基本原理

npm在安装依赖时，默认会将软件包存储在node_modules目录下。这里需要注意-save-dev和-save两种命令的区别：

• -save或-S：会将依赖项添加到dependencies中，默认作为线上依赖。

• -save-dev或-D：会将依赖项添加到devDependencies中，仅在开发环境中使用。

2. 实际操作中的表现

为了更直观地了解这些命令的实际效果，我进行了以下实验：

• 安装jQuery：在项目根目录下执行npm install jquery，jQuery会被安装在node_modules中，但不会被添加到package.json中的任何依赖项中，除非后续使用-save或-save-dev。

  npm install jqueryls node_modules

  此时，node_modules中会出现jquery文件夹，但package.json中没有记录此依赖。

• 使用-save命令：为了将jQuery作为线上依赖添加到项目中，可以执行：

  npm install jquery --save

  因此，package.json中的dependencies中会有"jquery": "^x.x.x"，同时node_modules中也会保留jquery。

• 使用-save-dev命令：将jQuery作为开发依赖添加：

  npm install jquery --save-dev

  此时，package.json中的devDependencies中会有"jquery": "^x.x.x"，node_modules同样会保留jquery。

3. 不同依赖级别的打包表现

在最终打包生成main.js文件时，无论依赖项是在dependencies还是devDependencies中，都会被包含进打包结果。即使未使用--save或--save-dev命令，依赖项仍能通过node_modules找到。

4. 含external依赖的情况

当引入带有外部依赖的库（如axios）时，可以观察以下情况：

• 安装axios：

  npm install axios

  • node_modules中会出现axios和相关依赖。
  • packages.json中没有明确记录这些依赖项。

5. 依赖冲突与解决方案

为了防止依赖冲突，许多开发者会将基本包裹放在dependencies中，而高级包裹放在devDependencies中，或者使用peerDependencies来强制需求不在项目中。

例如，Bootstrap并不直接将其依赖项添加到dependencies中，而是将它们作为peerDependencies：

"peerDependencies": {  "jquery": "1.9.1 - 3",  "popper.js": "^1.16.0"}

这意味着在安装Bootstrap时，会强制下载并安装这些依赖项，但不会将它们添加到项目中，从而避免版本冲突。

结论

• -save：将依赖项添加到dependencies中，适用于线上使用。
• -save-dev：将依赖项添加到devDependencies，仅在开发环境中使用。
• devDependencies与dependencies：二者可以同时存在，具体取决于项目需求。
• 打包效果：无论依赖项在dependencies还是devDependencies中，打包结果都会包含这些依赖项。
• 发布第三方包：为了避免依赖冲突，建议使用peerDependencies或谨慎管理外部依赖版本。

在实践中，选择合适的依赖级别不仅影响开发工作流程，也会对包的大小和打包性能产生影响。因此，清晰地记录依赖关系是项目管理中的重要环节。

转载地址：http://uxnnz.baihongyu.com/