将类导出为 webpack 中的模块

Question

我正在使用 Webpack 导入具有单个类的 javascript 文件。

my_class.js

console.log('hello from my_class');

class myClass {
    // ...
}

索引.js

import './my_class.js';

webpack.config.js

const path = require('path')

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

我正在尝试在页面上使用此类。

索引.html

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

</script>

我可以看到我的控制台日志（“hello from my_class”），但myClass显示为未定义。

Uncaught ReferenceError: myClass is not defined

我需要做什么才能myClass导出并在标记中可用？

Answer 1

首先，您应该导出该类。

\n

export class myClass {\n    // ...\n}\n

\n

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

\n

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

\n

2021 和 webpack 认为联合应用程序比添加 ES 模块支持更高的优先级 \xe2\x80\x8d\xe2\x99\x82\xef\xb8\x8f 如果不想使用 UMD，请使用 rollup。

\n

以及参考：someLibName.myClass

\n