dependencies 和 devDependencies 的区别，安装包的时候，应该放在哪？

无言非影2024-04-05 12:33:48

在 package.json 文件中，dependencies 和 devDependencies 用于指定项目的依赖包，但它们有不同的用途：

dependencies

• 用途：包含项目运行时所需的依赖包。这些依赖在生产环境中是必需的。
• 示例：vue, element-plus 等前端库，或者后端项目中的 express, mongoose 等。

devDependencies

• 用途：包含项目开发时所需的依赖包。这些依赖仅在开发环境中使用，不会在生产环境中部署。
• 示例：构建工具（如 vite, webpack），代码格式化工具（如 prettier, eslint），测试框架（如 jest, mocha）等。

如何决定安装到哪个依赖中？

1. 开发工具和构建工具：如果是用于代码编译、打包、测试或格式化的工具，通常安装到 devDependencies。
2. 运行时依赖：如果是项目运行时需要用到的库或框架，比如 Vue, React, Axios 等，则应该安装到 dependencies。
3. 安装命令：
   • 安装到 dependencies：npm install package-name 或 yarn add package-name
   • 安装到 devDependencies：npm install package-name --save-dev 或 yarn add package-name --dev

sass 错误安装在dependencies的列子

在使用 Vue 和 Vite 开发项目时，会使用 sass 作为 CSS 预处理器来编写更加灵活和可维护的样式代码。
然而，一个常见的错误是将 sass 错误地添加到项目的 dependencies 中，而不是 devDependencies。
这可能会导致一些问题，例如增加生产环境的包大小和潜在的构建问题。

例如，项目 package.json 文件中的依赖项可能如下所示：

"dependencies": {
  "element-plus": "^2.6.3",
  "sass": "^1.72.0",
  "vue": "^3.4.21"
}

在这种情况下，sass 被错误地放置在了 dependencies 中。

为什么这是一个问题？

dependencies 应该只包含项目在生产环境中运行时所需的包。
而 sass 实际上是一个开发工具，只在开发环境中用于编译 SCSS 文件。
将 sass 放在 dependencies 中意味着它也会被包含在生产环境的构建中，这是不必要的，可能会增加构建大小和复杂性。

解决方案

要解决这个问题，需要将 sass 从 dependencies 移动到 devDependencies。
可以通过以下步骤在命令行中完成：

1. 首先，卸载 sass：

   npm uninstall sass
   

2. 然后，将 sass 安装到 devDependencies：

   npm install sass --save-dev
   

完成这些步骤后，package.json 应该会更新，将 sass 放在 devDependencies 中，如下所示：

"devDependencies": {
  "sass": "^1.72.0",
  ...
}