使用其他模块时无法解析TypeScript npm包问题排查

核心问题定位 #

你遇到的导入错误，本质是npm包的构建配置缺失或错误，导致Webpack无法正确编译TypeScript代码，同时包的导出格式不兼容React应用的模块系统。以下是针对性的修复方案：

1. 修复webpack.config.js配置 #

原配置缺少TypeScript解析规则和正确的库输出配置，修改如下：

const path = require('path');

module.exports = {
  // 指定入口文件
  entry: './src/index.ts',
  module: {
    rules: [
      // 添加ts-loader处理TypeScript文件
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  // 配置文件扩展名解析
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    // 设置库名称和输出格式，兼容CommonJS/ES模块等多种环境
    library: 'myLibrary',
    libraryTarget: 'umd',
    globalObject: 'this',
  },
};

2. 修正tsconfig.json配置 #

需要开启类型声明生成，并调整模块、目标版本配置：

{
  "compilerOptions": {
    "target": "ES6", // 编译目标版本，保证兼容性
    "module": "ESNext", // 模块系统，配合Webpack输出
    "declaration": true, // 生成.d.ts类型文件，供React应用识别类型
    "outDir": "./dist", // 编译输出目录
    "strict": true, // 开启严格类型检查
    "esModuleInterop": true // 兼容CommonJS模块导入
  },
  "include": ["src/**/*"], // 包含src下所有文件
  "exclude": ["node_modules"] // 排除依赖目录
}

3. 完善package.json配置 #

确保包的入口和类型文件路径正确：

{
  "name": "myLibrary",
  "version": "1.0.0",
  "main": "dist/index.js", // 主入口指向编译后的文件
  "types": "dist/index.d.ts", // 类型文件路径
  "scripts": {
    "build": "webpack --mode production" // 添加构建命令
  }
}

4. 构建并测试包 #

• 安装依赖：npm install ts-loader typescript webpack webpack-cli --save-dev
• 执行构建：npm run build
• 在React应用module A中重新安装包（本地开发可使用npm link或直接指定本地路径安装）
• 导入测试：

import { results } from 'myLibrary';

console.log(results.add(2, 3)); // 正常调用

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