理解 React Native 工作区中的 `nohoist`

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

在 monorepo 设置中管理依赖项可能具有挑战性，尤其是在处理 React Native 项目时。Yarn Workspaces 为在单一仓库中管理多个包提供了强大的解决方案。然而，有时将依赖项提升到根 node_modules 的默认行为可能会导致问题，特别是在 React Native 中。这就是 nohoist 功能派上用场的地方。

在这篇博文中，我们将探讨 nohoist 是什么，为什么它在 React Native 工作区中有用，以及如何配置它。

什么是 nohoist？

Yarn Workspaces 默认将依赖项提升到根 node_modules 目录，以避免重复并节省空间。然而，一些包，特别是那些在 React Native 中带有原生模块的包，可能需要将其依赖项安装在自己的 node_modules 目录中才能正常运行。

nohoist 选项允许你指定不应被提升的包，而应该保留在它们各自包的 node_modules 目录中。

为什么在 React Native 工作区中使用 nohoist？

React Native 项目通常包含对其依赖项有特定要求的原生模块。如果这些依赖项被提升到根 node_modules，可能会导致构建问题或运行时错误。例如，某些原生模块期望它们的依赖项位于相对于自己目录的特定位置。

通过使用 nohoist，你可以确保这些依赖项保持在需要它们的包的本地，从而避免潜在的冲突并确保更稳定的构建环境。

在 React Native 工作区中设置 nohoist

步骤 1：使用 Yarn Workspaces 创建 Monorepo

首先，使用 Yarn Workspaces 设置一个 monorepo。以下是基本结构：

my-monorepo/
├── package.json
├── packages/
│   ├── app/
│   │   ├── package.json
│   │   └── ...
│   ├── module-a/
│   │   ├── package.json
│   │   └── ...
│   └── module-b/
│       ├── package.json
│       └── ...

步骤 2：为 Yarn Workspaces 配置 package.json

在根 package.json 中，启用 Yarn Workspaces 并定义包：

{
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**/react-native",
      "**/react-native/**"
    ]
  }
}

步骤 3：添加 nohoist 配置

指定哪些包不应被提升。例如，如果 module-a 和 app 需要自己的本地版本的 react-native 和 react-native 依赖项：

{
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "app/react-native",
      "app/react-native/**",
      "module-a/react-native",
      "module-a/react-native/**"
    ]
  }
}

步骤 4：安装依赖项

在 monorepo 的根目录运行 yarn install。这将遵守 nohoist 配置，并确保指定的包及其依赖项不被提升。

yarn install

React Native 应用的示例 package.json

以下是 packages/app 目录中 React Native 应用的示例 package.json：

{
  "name": "app",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.64.2"
  }
}

模块的示例 package.json

以下是 packages/module-a 目录中模块的示例 package.json：

{
  "name": "module-a",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.64.2"
  }
}

结论

在 Yarn Workspaces 中使用 nohoist 是管理 React Native monorepo 设置中依赖项的强大方法。通过确保某些包保留在各自的目录中，您可以避免与原生模块相关的潜在问题，并确保更顺畅的开发体验。

通过正确配置 nohoist，您可以维护一个干净高效的依赖结构，满足 React Native 项目的特定需求。

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。