Webpack构建类库导入报错：TypeError: xxx is not a constructor及npm包导入问题

看起来你遇到的问题是本地通过script标签能正常使用，但发布到npm后导入新项目就报错，这大概率是模块导出配置或者打包设置的问题。我帮你梳理几个常见的原因和解决办法：

1. 检查Webpack打包配置的输出设置 #

本地script标签引入时，你的类是挂载在全局变量上的，但npm包需要支持模块导入（CommonJS/ES模块），所以Webpack的output配置必须正确暴露你的类。

修改你的webpack.config.js，确保output包含这些关键配置：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 你的入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'awesome-table-dist.js',
    // 核心配置：让包支持多种模块规范
    library: 'AwesomeTable', // 对应你本地用的全局变量名
    libraryTarget: 'umd', // 同时支持CommonJS、AMD和全局变量
    umdNamedDefine: true,
    globalObject: 'this' // 兼容浏览器和Node环境的全局对象
  },
  // ...其他loader、插件配置
};

这样打包后的文件既能通过script标签全局使用，也能被模块导入识别。

2. 修正package.json的入口配置 #

npm包需要明确告诉Node和打包工具哪里是入口文件，检查你的package.json：

{
  "name": "awesome-table",
  "version": "1.0.0",
  "main": "./dist/awesome-table-dist.js", // 指向打包后的umd文件
  "type": "module", // 如果你的源文件是ES模块，加上这个
  // 可选：用exports字段更精准地指定不同环境的入口
  "exports": {
    ".": {
      "require": "./dist/awesome-table-dist.js",
      "import": "./dist/awesome-table-dist.esm.js" // 如果你单独打包了ES模块版本
    }
  }
}

如果没有main字段，npm会默认找根目录的index.js，这可能不是你打包后的文件，导致导入错误。

3. 确保源文件正确导出类 #

检查你的核心类文件，比如src/AwesomeTable.js，确认导出方式正确：

• 如果是命名导出：

export class AwesomeTable {
  constructor(elementId) {
    // 你的逻辑
  }
}

导入时要对应使用命名导入：

import { AwesomeTable } from 'awesome-table';
const awesomeTable = new AwesomeTable('record');

• 如果是默认导出：

export default class AwesomeTable {
  constructor(elementId) {
    // 你的逻辑
  }
}

导入时可以直接：

import AwesomeTable from 'awesome-table';
const awesomeTable = new AwesomeTable('record');

4. 排查导入后的模块结构 #

如果还是报错，可以在新项目中先打印导入的内容，看看实际拿到的是什么：

import * as AwesomeTableModule from 'awesome-table';
console.log('导入的模块内容：', AwesomeTableModule);

如果看到输出里有default属性，说明是默认导出，你可能需要用new AwesomeTableModule.default('record')（或者调整导入方式）；如果是命名导出，应该能直接看到AwesomeTable构造函数。

按照这几步排查，基本能解决导入时的构造函数错误问题。

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