如何在外部（如HTML源码）访问Babel+Webpack生成的ES6类？

这问题我之前踩过坑！核心原因是Webpack默认会把你的代码包裹在模块作用域里，不会自动把类、变量这类成员暴露到全局的window对象上，所以你在HTML里直接调用就会触发"identifier not defined"错误。下面给你几种实用的解决办法：

方法1：通过Webpack配置全局暴露（推荐批量暴露） #

修改你的webpack.config.js，在output选项里添加library和libraryTarget配置，让打包后的代码自动挂载到window上：

module.exports = {
  // 其他配置（entry、module等）...
  output: {
    filename: 'bundle.js',
    // 定义全局对象的名称，比如叫MyProjectLib
    library: 'MyProjectLib',
    // 指定挂载到window对象
    libraryTarget: 'window'
  }
};

打包完成后，你就可以在HTML里通过全局对象访问你的类了：

// HTML中的script代码
const myInstance = new MyProjectLib.MyES6Class();

如果想让每个类直接成为全局变量（而不是嵌套在一个对象里），可以把libraryTarget设为'var'，同时library设为一个数组或者用libraryExport配置，不过这种方式容易污染全局作用域，不推荐。

方法2：手动挂载到window（适合少量暴露） #

如果只是需要暴露少数几个类或变量，可以在你的ES6代码里手动把它们挂载到window对象上：

// 你的ES6类文件
export class User {
  constructor(name) {
    this.name = name;
  }
}

// 手动挂载到全局
window.User = User;

这样打包后，在HTML里就能直接调用：

const user = new User('Alice');

方法3：用ES模块方式导入（现代规范） #

如果你更倾向于模块化开发，不想污染全局作用域，可以配置Webpack生成ES模块，并在HTML里用type="module"的脚本导入：

1. 先修改Webpack配置：

module.exports = {
  // 其他配置...
  output: {
    filename: 'bundle.js',
    libraryTarget: 'module'
  },
  experiments: {
    outputModule: true // 开启ES模块输出支持
  }
};

2. 然后在HTML里通过模块导入使用：

<script type="module">
  import { User } from './bundle.js';
  const user = new User('Bob');
  console.log(user.name);
</script>

注意事项 #

• 如果开启了Webpack的production模式，代码压缩可能会混淆类名，导致无法访问。这时候需要配置Terser插件保留类名，或者用方法1的library配置，确保类名被保留在全局对象中。
• 尽量避免过度暴露全局变量，模块化的方式（方法3）更利于代码维护。

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