如何在HTML文件中正确实例化JavaScript的Puzzle类？

这个报错的根源很明确：你在class.js里用了Node.js专属的CommonJS模块导出语法module.exports = Puzzle;，但浏览器环境里没有module这个全局对象，所以直接运行就会抛出ReferenceError——和jQuery没关系哦，jQuery只是帮你操作DOM，管不了模块加载的事。

下面给你几种可行的解决办法，按简单程度排序：

方法1：直接让类成为全局变量（最快最直接） #

修改你的class.js，删掉Node.js专属的导出语句，让类直接暴露在全局作用域里：

class Puzzle {
  constructor(fenStart, pgnEnd) {
    this.fenStart = fenStart;
    this.pgnEnd = pgnEnd;
  }
}
// 删掉这一行：module.exports = Puzzle;

这样浏览器加载class.js后，Puzzle就会成为全局可访问的类，你原来的HTML代码不需要任何修改，刷新页面就能看到fenStart的内容了。

方法2：使用ES模块（现代浏览器推荐方案） #

如果你的项目是现代化的，更推荐用ES标准的模块语法，这样代码结构更清晰，也避免全局变量污染：

1. 修改class.js为ES模块格式：

export default class Puzzle {
  constructor(fenStart, pgnEnd) {
    this.fenStart = fenStart;
    this.pgnEnd = pgnEnd;
  }
}

2. 在HTML里引入模块时，要加上type="module"属性：

<script src="jquery-3.2.1.min.js"></script>
<script type="module" src="class.js"></script>
<!-- 或者直接把实例化代码写在模块脚本里 -->
<script type="module">
import Puzzle from './class.js';
const demoEL = $('#demo');
const x = new Puzzle("fenStart", "pgnEnd");
demoEL.html(x.fenStart);
</script>

⚠️ 注意：用ES模块时，直接用file://协议打开HTML可能会触发跨域错误，建议用本地服务器运行（比如用VS Code的Live Server插件，或者命令行运行python -m http.server）。

方法3：用打包工具转换（适合复杂项目） #

如果你的代码依赖很多CommonJS模块，可以用Webpack、Rollup或者Browserify这类打包工具，把Node.js风格的代码转换成浏览器能识别的单文件。不过这个方法需要额外的配置步骤，适合大型项目，小例子就没必要啦。

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