TypeScript React组件库无法导出组件，npm link本地测试报错

核心问题 #

组件无法导出的根本原因是package.json的main字段指向了未编译的源码文件，而非webpack构建后的产物。消费项目通过npm link引入库时，直接读取了未编译的TypeScript文件，导致模块解析失败。

分步修复 #

1. 修正package.json配置 #

更新package.json中的关键字段，指向构建产物：

{
  "name": "ts-lib-test",
  "version": "1.0.0",
  "description": "dsfsdf",
  "main": "dist/index.js", // 改为构建后的入口文件
  "types": "dist/index.d.ts", // 添加TypeScript声明文件入口
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production" // 添加生产构建脚本
  },
  // 其余字段保持不变
}

2. 调整tsconfig.json确保声明文件生成 #

在tsconfig.json中添加declarationDir字段，明确声明文件输出目录：

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "rootDir": "./src/components",
      "outDir": "./dist",
      "declaration": true,
      "declarationDir": "./dist", // 指定声明文件输出目录
      "sourceMap": true,
      "jsx": "react",
      "baseUrl": "./src"
    },
    "include": ["./src/components/**/*"] // 缩小范围，只包含组件源码
  }

3. 优化webpack配置（可选但建议） #

添加模式配置与全局对象兼容项，提升产物兼容性：

const path = require('path');

module.exports = {
  mode: 'production', // 指定构建模式
  entry: './src/components/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'ts-lib-test',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    globalObject: 'this' // 避免浏览器环境下的模块解析问题
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.json']
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

4. 重新构建并链接库 #

执行以下命令：

# 清理旧构建产物
rm -rf dist
# 构建库
npm run build
# 重新执行npm link（清除旧缓存）
npm unlink
npm link

5. 消费项目清理缓存 #

在消费项目中执行：

# 清除开发服务器缓存
rm -rf node_modules/.cache
# 重启开发服务器
npm start

关于你的疑问 #

• 无需放弃TypeScript：当前问题是配置错误导致的，TypeScript完全适合开发React组件库，类型定义比PropTypes更严谨。若需兼容无TypeScript的项目，可额外安装prop-types包并在组件中定义。
• 无需依赖create-react-library：手动配置虽繁琐，但灵活性更高，掌握这些配置能让你更清晰地把控库的构建流程。

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