使用Nx构建React组件库发布npm后导入及类型声明问题

问题背景 #

我正尝试用Nx构建React组件库并发布到npm，供多个应用复用，但构建流程出了问题。原本以为配置rootDir和exports就能解决，结果始终不生效。用import { Test } from '@<scope>/components'导入组件时，会出现类型声明找不到的错误。我需要支持两种导入方式：

• import { Test } from '@<scope>/components'
• import { Test } from '@<scope>/components/core'

当前库目录结构：

- packages
  - components
    - src
      - core
        - Test
          - Test.tsx
        - index.ts
      - index.ts
    - package.json
    - project.json
    - tsconfig.json
...

核心问题 #

1. package.json的exports配置指向了源码目录的文件，而非构建后的dist产物
2. TypeScript未正确生成并输出类型声明文件到构建目录
3. Rollup构建的入口和输出结构不匹配子路径导出的需求

修复步骤 #

1. 修正package.json的exports配置 #

把所有路径指向构建后的dist目录产物，确保类型和JS文件路径对应：

{
  "name": "@<scope>/components",
  "version": "0.0.3",
  "main": "./index.js",
  "types": "./index.d.ts",
  "exports": {
    ".": {
      "types": "./index.d.ts",
      "import": "./index.js",
      "require": "./index.js"
    },
    "./core": {
      "types": "./core/index.d.ts",
      "import": "./core/index.js",
      "require": "./core/index.js"
    }
  },
  "publishConfig": {
    "access": "public"
  }
}

2. 配置TypeScript生成类型声明 #

修改tsconfig.lib.json（项目主tsconfig引用了这个文件），开启声明生成并指定输出目录：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "declaration": true,
    "outDir": "../../dist/packages/components",
    "rootDir": "./src",
    "types": ["react", "react-dom"]
  },
  "include": ["src/**/*"],
  "exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx"]
}

3. 更新Rollup构建配置（project.json） #

添加多入口支持，确保根目录和core目录的代码都被构建，同时把类型声明文件复制到输出目录：

{
  "name": "components",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "packages/components/src",
  "projectType": "library",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@nrwl/rollup:rollup",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/packages/components",
        "tsConfig": "packages/components/tsconfig.lib.json",
        "project": "packages/components/package.json",
        // 配置多入口，覆盖根和core的入口文件
        "entryFile": [
          "packages/components/src/index.ts",
          "packages/components/src/core/index.ts"
        ],
        "external": ["react", "react-dom", "react/jsx-runtime"],
        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
        "rootDir": "packages/components/src",
        "compiler": "babel",
        "deleteOutputPath": true,
        "format": ["esm"],
        "updateBuildableProjectDepsInPackageJson": true,
        "buildableProjectDepsInPackageJsonType": "dependencies",
        "assets": [
          {
            "glob": "packages/components/README.md",
            "input": ".",
            "output": "."
          },
          // 复制所有类型声明文件到输出目录
          {
            "glob": "**/*.d.ts",
            "input": "packages/components/src",
            "output": "."
          }
        ]
      }
    }
  }
}

4. 调整源码入口导出 #

• 在src/index.ts中导出core模块的内容，支持根路径导入：

export * from './core';

• 在src/core/index.ts中导出Test组件：

export * from './Test/Test';

5. 构建验证 #

运行构建命令：

nx build components

构建完成后，检查dist/packages/components目录下是否存在：

• index.js、index.d.ts
• core/index.js、core/index.d.ts

然后在测试项目中安装本地包验证导入：

npm install ../dist/packages/components

测试两种导入方式是否都能正常识别类型，无报错。

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