如何在 bundle.js 中使用 webpack 5 发布 ES6 类并在一些使用代码中导入它们？

Question

我有一个 React 项目，我在其中创建了几个 ES6 类。 我希望能够将生成的 bundle.js 用作库， 这样我就可以重用包含的 ES6 类。

假设我的主文件index.jsx 包含以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

export default class Index {
  constructor() {
    this.foo = 'foo';
  }
}

Index 是我想重用的类。

我使用 webpack 处理代码并将其发布为bundle.js 文件。

然后我希望能够通过以下方式重用代码：

A. ES6 导入

import Index from '../path/to/bundle.js';

或

B.脚本标签结合requirejs

var bundleScript = document.createElement('script');
bundleScript.setAttribute('src','./path/to/bundle.js');
bundleScript.addEventListener('load', ()=> {
    console.log('loaded');
       
    require(['bundle'],(bundle)=>{
        console.log(bundle);        
    }, (error)=>{
        console.log(error);
    })
});

我尝试了几种 webpack 配置，但都没有成功。

对于 A，我收到以下错误消息：

Uncaught SyntaxError: The requested module
'../path/to/bundle.js' does not provide an export named 'default'

=> 如何定义 bundle.js 的默认导出？

似乎在我的主文件 index.jsx 中定义一些默认导出不起作用。我的期望是，我不需要明确定义要发布的导出。我希望我在他们的文件中使用“默认导出类 Foo {}”定义的所有类都可用。

对于 B，我得到了一些用于所需捆绑包的 Module 对象：

但是，我不知道如何使用该 Module 对象。它没有“索引”或“默认”或其他属性。

---

==> webpack 配置和导入方法的正确组合是什么？

示例 webpack 输出选项：

output: {    
    filename: 'bundle.js',
    library: 'bundle',
    libraryTarget: 'umd',
...

相关问题：

Output an ES module using webpack

https://github.com/webpack/webpack/issues/3929

Answer 1

对于单个类的导出，以下组合对我有用：

webpack 输出选项：

filename: 'bundle.js',
library: 'bundle',
libraryExport: 'default' ,
libraryTarget: 'var',

用法：

import  '../path/to/bundle.js';

var instanceOfIndexClass = new window.bundle();