使用esBuild构建多入口my-lib库后，React项目无法导入模块

1. 修复my-lib的package.json配置 #

1.1 完善exports字段并添加ES模块声明 #

当前exports仅配置子路径，缺少主入口映射和类型关联，且未声明包类型。修改后的配置：

{
  "name": "my-lib",
  "type": "module",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./profile": {
      "import": "./dist/components/profile/index.js",
      "types": "./dist/components/profile/index.d.ts"
    },
    "./account": {
      "import": "./dist/components/account/index.js",
      "types": "./dist/components/account/index.d.ts"
    }
  }
}

• type: "module"：声明包为ES模块，避免Webpack/Node按CommonJS解析导致的兼容性问题
• 补充主入口"."的映射：解决import from 'my-lib'的整体导入失败问题
• 每个子路径添加types字段：让TypeScript能定位到对应组件的类型定义

1.2 统一类型文件输出目录 #

my-lib的tsconfig中outDir为lib，但esbuild输出到dist，导致类型文件和编译代码路径不匹配。修改tsconfig：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "declaration": true,
    "target": "esnext",
    "lib": ["esnext", "dom"],
    "strict": true,
    "noImplicitAny": false,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src/**/*"]
}

2. 修复my-lib的构建流程 #

2.1 添加主入口文件 #

在my-lib的src目录创建index.ts，用于支持整体导入：

export * from './components/profile';
export * from './components/account';
// 其他组件的导出声明

2.2 新增类型文件生成脚本 #

esbuild不负责生成TypeScript类型，需单独通过tsc生成。在my-lib的package.json添加脚本：

{
  "scripts": {
    "build": "node esbuild.js && tsc --emitDeclarationOnly"
  }
}

运行npm run build时，会先编译代码，再生成类型文件到dist目录。

2.3 修正esbuild的入口配置 #

确保entryPoints包含主入口和所有子组件：

import { globPlugin } from 'esbuild-plugin-glob';

esbuild.build({
  entryPoints: ['src/index.ts', 'src/components/**/index.ts'],
  outdir: 'dist',
  format: 'esm',
  target: ['es6'],
  sourcemap: true,
  plugins: [globPlugin()],
});

3. 调整app的tsconfig配置 #

添加module: "esnext"以支持ES模块的子路径解析：

{
  "compilerOptions": {
    "declaration": false,
    "target": "es6",
    "lib": ["es2015", "es2017", "es2018", "dom", "esnext"],
    "noImplicitAny": false,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "outDir": "./dist/out-tsc",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "jsx": "react",
    "isolatedModules": true
  }
}

4. 重新验证导入 #

1. 在my-lib目录执行npm run build，确认dist目录下存在主入口和各组件的js、d.ts文件
2. 在app目录删除旧的my-lib依赖，重新执行npm install
3. 在user.tsx中使用正确的导入方式：

   // 整体导入
   import { Profile, Account } from 'my-lib';
   // 按需导入
   import { Profile } from 'my-lib/profile';
   import { Account } from 'my-lib/account';
   

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