使用 Webpack 将 ES6 模块与类捆绑 - 不是构造函数

Question

我正在构建一个使用 ES6 模块并包含类的库。如果我不进行捆绑，而是将 package.json“main”指向源代码，那么一切都会很好！我可以将库导入到应用程序中，效果非常好。

一旦我使用 WebPack 捆绑应用程序并将“主”指向打包的捆绑包，就什么都不起作用了，我只能抓着头上剩下的一点头发。

这是我收到的错误：

notablet__WEBPACK_IMPORTED_MODULE_3__.Notablet 不是构造函数

这是我的package.json

{
  "name": "notablet",
  "version": "4.7.0",
  "main": "lib/index.js",
  "type": "module",
  "scripts": {
    "test": "npx mocha ./test/**/*.test.js",
    "coverage": "c8 --reporter=text --all npm run test",
    "build": "webpack --config webpack.config.js"
  },
  "license": "MIT",
  "devDependencies": {
    "c8": "^7.12.0",
    "chai": "^4.3.6",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "jsdom": "^20.0.0",
    "mocha": "^10.0.0",
    "sinon": "^14.0.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}

这是我的 webpack.config.js：

import path from 'path';

import {fileURLToPath} from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const config = {
  mode: 'development',
  devtool: false,
  entry: './src/Notablet.js',
  output: {
    path: path.resolve(__dirname, 'lib'),
    filename: "index.js",
    library: "notablet"
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  }
};

export default config;

注意...我确实将上面的“模式”从“开发”更改为“生产”，但在捆绑和使用后遇到了相同的错误。

这是我的 Notablet.js 文件的相关部分：

import { Queue } from './Queue.js';
// Themes
import style from './style.css'; // assert { type: "css" };
import light from './theme/light.css';
import dark from './theme/dark.css';
import elegant from './theme/elegant.css';
import fantasy from './theme/fantasy.css';
import robot from './theme/robot.css';


export class Notablet {

    constructor(conf = {}, queue = new Queue()) {
        this.queue = queue;
        var config = {
            backgroundColor: 'black',
            color: '#ffffff',
            theme : 'light'
        };
        this.config = {...config, ...conf};    
        this.loadTheme();
    }


    /**
     * Loads the theme identified in the configuration object along with the base stylesheet
     */
    loadTheme() {
        var theme = this.getTheme(this.config.theme)
        var sheet = new CSSStyleSheet();
        sheet.replace(theme);
        var baseSheet = new CSSStyleSheet();
        baseSheet.replace(style);
        document.adoptedStyleSheets = [baseSheet, sheet];
    }


    getTheme(theme = 'light') {
        var ret = light;
        switch(theme) {
            case "dark":
                ret = dark;
                break;
            case "elegant":
                ret = elegant;
                break;
            case "fantasy":
                ret = fantasy;
                break;
            case "robot":
                ret = robot;
                break;
        }
        return ret;
    }    
}

当我调用

let nt = new Notablet()

时，我的应用程序中似乎抛出了错误

Notablet 似乎是 ES6 中的一个有效类，并且它有一个构造函数。我的假设是 Webpack 需要配置为以某种方式处理 ES6 模块，但我知道我只需要将 package.json“类型”更改为“模块”。

非常感谢任何帮助！

Answer 1

不知道这是否仍然相关，但这是 webpack 的官方文档 https://webpack.js.org/configuration/output/

TLDR：尝试将

libraryTarget: 'umd',

添加到您的输出选项