webpack 导出 JavaScript 类并在 HTML 中使用

Question

我正在使用webpack并尝试使用以 HTML 导出的类。
当我尝试访问 HTML 中的类时出现错误。

下面是示例代码。

// src/app.js
// I have other imports 

export class MyClass {
   constructor() {

   }
   
   foo() {
      console.log('In Foo');
   }
}

// webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    libraryTarget: 'var',
    library: 'MyClass',
  }
};

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <script src="./main.js"></script>
  <script type="text/javascript">
    const obj = new MyClass();
    obj.foo();
  </script>
</body>
</html>

我收到以下错误：

Uncaught TypeError: MyClass is not a constructor

另外，如果我有多个类、变量和函数，那么如何从 JavaScript 导出并从 HTML 访问？

Answer 1

使用 Webpack 编译库：

 output: {
    library: { type: 'umd' }
 }

webpack 导出 JavaScript 类并在 HTML 中使用

问题描述

1 个解决方案

解决方案1
1 2022-12-17 15:56:44

webpack 导出 JavaScript 类并在 HTML 中使用

问题描述

1 个解决方案

解决方案1 1 2022-12-17 15:56:44

解决方案1
1 2022-12-17 15:56:44