Javascript 将类导出为网页包中的模块

我正在使用Webpack导入一个javascript文件，该文件只有一个类

my_class.js

console.log('hello from my_class');

class myClass {
    // ...
}

import './my_class.js';

const path = require('path')

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

index.js

console.log('hello from my_class');

class myClass {
    // ...
}

import './my_class.js';

const path = require('path')

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

webpack.config.js

console.log('hello from my_class');

class myClass {
    // ...
}

import './my_class.js';

const path = require('path')

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

我试图在页面上使用这个类

index.html

<script src="./dist/bundle.js"></script>
<script>
    
    const myClass = new myClass();

</script>

const myClass=new myClass（）；

我可以查看我的控制台日志（“来自我的_类的你好”），但是

myClass

显示为未定义

未捕获引用错误：未定义myClass

---

我需要做什么才能导出

myClass

并在标记中可用？

首先，您应该导出类

export class myClass {
    // ...
}

对于浏览器，您应该使用IIFE或UMD格式：

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

---

2021和webpack认为联邦应用程序的优先级高于添加ES模块支持，因为您尚未从

my_class.js

文件导出类，所以将无法导入它

console.log('hello from my_class');

class myClass {
    // ...
}

export default myClass;

你的输入应该是

import myClass from './my_class.js';

---

这回答了你的问题吗？不是真的。我尝试在

my_class.js

的底部使用

exports.myClass=myClass

，但前端的

myClass

仍然没有定义。我认为这是因为

exports

在节点环境中，我试图在前端使用它，但我认为webpack会处理所有这些？没问题：/export语句、输出中的附加指令以及作为

someLibName

的属性引用之后，我仍然会得到相同的未定义错误