使用Webpack导出JS类在HTML调用遇构造函数错误及多导出问题

解决单个类导出的构造函数错误 #

错误根源：你当前的webpack配置中，library: 'MyClass'会把整个模块的导出对象赋值给全局变量MyClass，但你的代码是命名导出export class MyClass，这就导致全局的MyClass实际是模块的exports对象，而非你定义的类本身，自然无法当作构造函数使用。

以下两种方案可修复问题：

方案1：改用默认导出（修改JS代码） #

把命名导出改为默认导出，让webpack直接将类绑定到全局变量：

// src/app.js
// 保留其他导入
export default class MyClass {
  constructor() {}
  
  foo() {
    console.log('In Foo');
  }
}

此时HTML中的new MyClass()即可正常执行，无需修改webpack配置。

方案2：修改webpack配置（保留命名导出） #

如果不想改动JS代码的导出方式，在webpack.config.js的output中新增libraryExport: 'MyClass'，指定将模块内的MyClass成员赋值给全局变量：

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

全局的MyClass会直接指向你定义的类，HTML调用代码无需修改。

多个类、变量、函数的导出与访问 #

如果需要暴露多个内容，推荐将所有成员挂载到一个全局对象中，方便统一访问：

步骤1：JS中集中导出命名成员 #

// src/app.js
export class ClassA {
  hello() { console.log('Hello from ClassA'); }
}

export class ClassB {
  world() { console.log('Hello from ClassB'); }
}

export const appVersion = '1.0.0';

export function utilsFunc() {
  return 'Utility function result';
}

步骤2：修改webpack配置 #

将library设为全局对象名（比如MyApp），并通过libraryExport: '*'把所有命名导出的成员挂载到该对象：

// webpack.config.js
module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    libraryTarget: 'var',
    library: 'MyApp', // 全局对象名称
    libraryExport: '*' // 导出所有成员到该对象
  }
};

步骤3：HTML中访问成员 #

通过全局对象MyApp直接调用各个成员：

<script src="./main.js"></script>
<script>
  const a = new MyApp.ClassA();
  a.hello(); // 输出 Hello from ClassA
  
  console.log(MyApp.appVersion); // 输出 1.0.0
  console.log(MyApp.utilsFunc()); // 输出 Utility function result
</script>

另外，也可以在JS中直接导出一个包含所有成员的默认对象：

// src/app.js
class ClassA { /* ... */ }
class ClassB { /* ... */ }
const appVersion = '1.0.0';
function utilsFunc() { /* ... */ }

export default {
  ClassA,
  ClassB,
  appVersion,
  utilsFunc
};

此时webpack配置只需设置library: 'MyApp'（无需libraryExport），HTML中同样通过MyApp.ClassA的方式访问。

内容的提问来源于stack exchange，提问作者User7723337