前端开发者必读：如何区分 ‘dependencies‘ 和 ‘devDependencies‘ 以及它们的作用

当我们开发一个项目时，我们通常会使用各种工具、框架和库来帮助我们编写代码、进行测试和构建应用程序。这些工具和库被称为依赖项，它们是我们项目中不可或缺的一部分。

现在，让我们来了解一下 dependencies 和 devDependencies 这两个概念。

1. dependencies 是什么？

dependencies 是用于生产环境的依赖项，它们是我们在部署应用程序时所必需的。就像我们在烹饪中需要的原料一样，这些依赖项提供了我们应用程序运行所需的核心功能。

想象一下，你正在制作一道美味的披萨。你需要面团、番茄酱、奶酪和其他配料。这些材料就像是你的 dependencies，它们是制作披萨所必需的。

在项目中，我们可能会有像 React、Express、Lodash 这样的库作为我们的 dependencies。当我们部署我们的应用程序时，这些库将被安装到生产环境中，确保我们的应用程序正常运行。

2. devDependencies 是什么？

devDependencies 是用于开发环境的依赖项，它们主要用于辅助我们进行开发、测试和构建应用程序。它们就像是我们在烹饪过程中使用的工具和设备。

回到我们的披萨制作例子，想象一下你需要一个烤箱、刀具和烤盘来制作披萨。这些工具不是披萨的原料，但它们对制作披萨非常重要。

在项目中，我们可能会有像 Babel、Webpack、Jest 这样的工具作为我们的 devDependencies。它们帮助我们进行代码转换、模块打包和单元测试等开发过程中的任务。

3. 为什么要区分 dependencies 和 devDependencies？

现在你可能会问，为什么我们要区分这两种类型的依赖项呢？

首先，我们希望在生产环境中保持简洁和高效。生产环境是我们的应用程序真正运行的地方，我们只需要安装必要的依赖项，以减少应用程序的大小和复杂性。这样可以提高应用程序的性能和安全性。

其次，我们不希望开发过程中的工具和库混淆在生产环境中。开发工具和库可能会增加应用程序的大小，并且可能包含一些不必要的功能或调试信息。将它们标记为 devDependencies 可以确保它们不会被部署到生产环境中。

4. 如何使用 dependencies 和 devDependencies？

在 package.json 文件中，我们可以将依赖项分别列在 "dependencies" 和 "devDependencies" 部分。

{
  "dependencies": {
    "react": "^17.0.2",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "babel": "^7.14.6",
    "webpack": "^5.41.0"
  }
}

当我们执行 npm install 或者 yarn 命令时，只有 "dependencies" 中的依赖项会被安装到 node_modules 文件夹中。这些依赖项将在生产环境中使用。

如果我们只想安装生产环境的依赖项，可以使用 --production 参数：

npm install --production
yarn --production

这样只会安装 "dependencies" 中的依赖项。

5. 示例

让我们通过一个简单的示例来说明这些概念。假设我们正在开发一个使用 React 框架的网页应用程序，并使用 Babel 和 Webpack 进行开发和构建。

我们的 package.json 文件可能如下所示：

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-react": "^7.14.5",
    "webpack": "^5.41.0"
  }
}

在这个例子中，react 和 react-dom 是我们的核心依赖项，它们将在生产环境中使用。而 @babel/core、@babel/preset-react 和 webpack 是我们的开发依赖项，它们将在开发和构建过程中使用。

当我们执行 npm install 或者 yarn 命令时，所有的依赖项都会被安装。但在部署到生产环境时，我们可以使用 --production 参数来只安装生产环境的依赖项。

npm install --production
yarn --production

这样，我们就能保证生产环境中只有必要的依赖项，而开发工具和库不会被部署到生产环境中。

希望通过这个例子，你能更好地理解 dependencies 和 devDependencies 的概念以及它们在项目开发中的作用。