Nx Monorepo中共享资源与代码的访问配置问题

1. 共享图标的正确访问方式 #

先调整资源复制配置——你的my-lib图标实际存放在libs/my-lib/src/icons目录，不是之前配置的assets，所以修改my-app的project.json中的资源规则：

{
  "glob": "**/*",
  "input": "libs/my-lib/src/icons",
  "output": "assets/my-icons"
}

构建完成后，图标会被复制到dist/apps/my-app/assets/my-icons/路径下，不管是my-app里的comp1还是my-lib里的comp2，模板里用src="assets/my-icons/icon1.svg"就能正常访问。

如果my-lib单独构建时也需要处理图标，在my-lib的project.json中添加同样的资源配置即可——库最终会被应用引入，资源仍会打包到应用的assets目录。

2. 跨项目共享base-models.ts的配置 #

梳理导出结构 #

要支持@monkey/my-lib/models的导入路径，先在libs/my-lib/src/models目录下创建index.ts，导出base-models.ts的内容：

export * from './base-models';

也可以在libs/my-lib/src/index.ts中统一导出（可选，方便整体引用）：

export * from './models';

配置全局路径映射 #

在根目录的tsconfig.base.json中添加路径映射，所有项目都会继承该配置，无需逐个项目单独设置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@monkey/my-lib": ["libs/my-lib/src/index.ts"],
      "@monkey/my-lib/models": ["libs/my-lib/src/models/index.ts"]
    }
  }
}

这样不管是my-app还是其他项目，直接用import { BaseModels } from '@monkey/my-lib/models';就能导入目标代码。

确认Nx依赖关系 #

在my-app的project.json中，将my-lib添加为依赖：

{
  "dependencies": {
    "@monkey/my-lib": "*"
  }
}

也可以用Nx命令自动添加：nx g nx:dependency --project my-app --dependency my-lib

3. tsconfig.base.json与项目级tsconfig的规范结构 #

根级别tsconfig.base.json #

这是所有项目的基础配置，统一管理全局编译选项，结构示例：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": ".", // 将根目录作为模块解析的基础路径
    "paths": {}, // 全局路径映射，所有项目可继承
    "rootDir": ".", // 可选，指定所有源文件的根目录
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["node_modules", "dist"] // 排除无需编译的目录
}

项目级tsconfig（如apps/my-app/tsconfig.json） #

继承根级配置，仅添加项目特有的选项：

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc", // 当前项目编译产物的输出目录
    "rootDir": "src", // 当前项目的源文件根目录，编译后会保留源文件的目录结构
    "types": ["node"] // 项目特有的类型依赖，比如Node.js类型
  },
  "include": ["src/**/*"], // 当前项目需要编译的所有文件
  "exclude": ["src/test-setup.ts", "jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
}

关键规则说明 #

• paths覆盖：项目级tsconfig的paths会与base中的配置合并，若有相同的路径键，项目级配置会覆盖base的配置。
• baseUrl：指定模块解析的基础目录，所有相对路径的导入都会基于此目录查找。
• rootDir：指定编译的源文件根目录，TypeScript会按照源文件的目录结构，将编译后的文件输出到outDir对应的路径下。

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