如何限制Nx库中特定组件被外部导入引用？

当然可以搞定这个「import bleeding」的问题！我们可以结合Nx本身的特性、TypeScript配置和ESLint规则，把组件牢牢限制在所属Lib内部，下面是几个实用的方案：

1. 用Nx的依赖约束规则做全局限制 #

Nx自带的@nx/enforce-module-boundaries规则可以帮你管控跨Lib的依赖关系，精准限制哪些Lib能导入哪些内容：

• 首先给各个Lib打上标签，比如在nx.json的projects字段里，给ui Lib加scope:ui标签，data Lib加scope:data标签；
• 然后在根目录的.eslintrc.json里配置规则，禁止data Lib依赖ui Lib：

  {
    "rules": {
      "@nx/enforce-module-boundaries": [
        "error",
        {
          "depConstraints": [
            {
              "sourceTag": "scope:data",
              "onlyDependOnLibsWithTags": ["scope:data", "scope:shared"]
            },
            {
              "sourceTag": "scope:ui",
              "onlyDependOnLibsWithTags": ["scope:ui", "scope:shared"]
            }
          ]
        }
      ]
    }
  }
  

  如果只是想限制单个组件（比如banner）而非整个Lib，那可以搭配no-restricted-imports规则，直接禁止外部导入该组件的路径：

  {
    "rules": {
      "no-restricted-imports": [
        "error",
        {
          "paths": [
            {
              "name": "@myorg/ui/src/lib/banner",
              "message": "Banner组件仅允许在UI Lib内部使用，请勿从外部导入"
            }
          ]
        }
      ]
    }
  }
  

2. 通过TypeScript配置隐藏内部组件 #

利用TS的路径映射和入口导出控制，从根源上不让外部Lib能找到内部组件：

• 只在ui/src/index.ts里导出允许外部使用的内容，不要导出banner组件；
• 调整ui/tsconfig.json的路径映射，只指向公开入口：

  {
    "compilerOptions": {
      "paths": {
        "@myorg/ui": ["libs/ui/src/index.ts"]
      }
    }
  }
  

  这样外部Lib如果尝试导入@myorg/ui/src/lib/banner，TS编译器会直接报错（开启strict模式效果更好），因为这个路径不在映射范围内，而且公开入口也没导出它。

3. 拆分Lib为公开/内部目录 #

如果你的UI Lib里有大量内部组件，可以调整目录结构，把内部组件单独归类：

libs/ui/
├── src/
│   ├── lib/
│   │   ├─ public/       # 存放允许外部使用的组件
│   │   └─ internal/     # 存放仅内部可用的组件（比如banner）
│   │       └── banner/
│   │           ├── banner.template.html
│   │           ├── banner.component.ts
│   └── index.ts

然后在index.ts里只导出public目录的内容，再用ESLint规则禁止外部导入internal目录：

{
  "no-restricted-imports": [
    "error",
    {
      "patterns": ["@myorg/ui/src/lib/internal/*"]
    }
  ]
}

4. 创建Nx内部专用Lib #

Nx支持创建internal类型的Lib，这类Lib默认会被配置为仅允许被指定的Lib依赖：

• 用命令创建内部UI组件Lib：

  nx g @nx/angular:lib internal-ui --type=internal
  

• 把banner组件放到这个internal-ui Lib里，然后让主ui Lib依赖它，其他Lib（比如data）就无法导入内部组件了。

你可以根据项目情况组合使用这些方案，比如先用TS配置隐藏内部组件，再用ESLint做强制检查，最后用Nx的depcheck命令定期扫描依赖合规性，就能彻底解决组件越界导入的问题。

内容的提问来源于stack exchange，提问作者ignite-me