如何在Bit中链式关联Env？自定义React环境依赖优化咨询

背景 #

我已构建了一个React环境，其依赖配置如下：

{
  /**
   * standardize your component dependencies.
   **/
  "policy": {
    /**
     * peer dependencies for components using that env.
     */
    "peers": [
      {
        "name": "react",
        /* the version to be installed and used by the env */
        "version": "^18.0.0",
        /* the range of versions this env's components are compatible with */
        "supportedRange": "^17.0.0 || ^18.0.0"
      },
      {
        "name": "react-dom",
        "version": "^18.0.0",
        "supportedRange": "^17.0.0 || ^18.0.0"
      },
      {
        "name": "jest",
        "version": "29.3.1",
        "supportedRange": "29.3.1"
      },
      {
        "name": "react-router-dom",
        "version": "6.8.1",
        "supportedRange": "^6.8.1"
      },
      {
        "name": "@mdx-js/react",
        "version": "1.6.22",
        "supportedRange": "^1.6.22"
      },
      {
        "name": "@teambit/mdx.ui.mdx-scope-context",
        "version": "1.0.0",
        "supportedRange": "^1.0.0"
      },
      {
        "name": "@emotion/styled",
        "version": "^11.11.0",
        "supportedRange": "^11.11.0"
      },
      {
        "name": "@emotion/styled",
        "version": "^11.11.0",
        "supportedRange": "^11.11.0"
      },
      {
        "name": "@emotion/react",
        "version": "^11.11.0",
        "supportedRange": "^11.11.0"
      },
      {
        "name": "@mui/material",
        "version": "^5.14.13",
        "supportedRange": "^5.14.13"
      }
    ],
    /**
     * dev dependencies for components using that env
     */
    "dev": [
      {
        "name": "@types/react",
        "version": "18.2.12",
        /**
         * hide the dependency from bit's inspection tools.
         * in most cases, a component should only list its env as a dev dependency
         */
        "hidden": true,
        /* add this dependency to components, even if they don't explicitly import it */
        "force": true
      },
      {
        "name": "@types/react-dom",
        "version": "^18.2.5",
        "hidden": true,
        "force": true
      },
      {
        "name": "@types/jest",
        "version": "^29.2.2",
        "hidden": true,
        "force": true
      },
      {
        "name": "@testing-library/react",
        "version": "^13.4.0"
      },
      {
        "name": "@types/testing-library__jest-dom",
        "version": "^5.9.5",
        "force": true
      },
      {
        "name": "@testing-library/react-hooks",
        "version": "^8.0.1"
      }
    ]
  },
  /**
   * associate files with a specific dev service.
   * associated files are considered as dev files.
   **/
  "patterns": {
    /**
     * files to be loaded and displayed in the 'preview' tab.
     */
    "compositions": [
      "**/*.composition.*",
      "**/*.preview.*"
    ],
    /**
     * files to be loaded and displayed in the 'overview' tab.
     */
    "docs": [
      "**/*.docs.*"
    ],
    /* files to be included in the component testing */
    "tests": [
      "**/*.spec.*",
      "**/*.test.*"
    ]
  }
}

场景需求 #

我通过bit envs set命令基于上述自定义React环境构建组件，但其中一个组件需要用到某个外部库——我不想把这个库加入全局环境（目前已临时添加，但这会导致所有使用该环境的组件都依赖它），希望只让这个特定组件拥有该依赖。

请问是否可以创建第二个仅包含该外部库的React环境，并与现有环境链式关联？或者针对这种场景有什么最佳实践？

解决方案 #

方案一：创建继承式子环境（适用于未来可能有多个组件需要该库的场景） #

Bit支持环境的继承机制，可以基于现有React环境创建一个仅添加目标外部库的子环境：

1. 初始化子环境：
   执行命令创建基于现有环境的新环境：

   bit create env react-with-special-lib --extends enlear/dev/envs/react
   

2. 修改子环境依赖配置：
   在子环境的env.jsonc中，仅添加目标外部库到policy.peers或policy.dependencies（根据库的类型选择），其余配置将自动继承父环境。
3. 为目标组件设置子环境：
   给需要该库的组件单独指定子环境：

   bit envs set [你的组件ID] enlear/dev/envs/react-with-special-lib
   

方案二：直接给单个组件添加依赖（适用于仅当前组件需要该库的场景） #

不需要创建新环境，直接给目标组件单独添加依赖即可：

1. 进入组件目录并安装依赖：

   cd [组件目录路径]
   bit install [目标外部库名称]
   

2. （可选）声明peer依赖：
   如果该库属于peer依赖范畴，可以在组件的package.json中手动添加peerDependencies字段，确保依赖版本兼容。

方案选择建议 #

• 如果后续还有其他组件可能需要使用该外部库，优先选择继承式子环境，便于统一管理依赖版本；
• 如果仅当前单个组件需要该库，直接给组件添加依赖更高效，无需额外维护环境配置。

内容的提问来源于stack exchange，提问作者Lakindu Hewawasam