开发多人国际象棋时，如何在index.html中集成chess.js？

你正在分步开发一款多人国际象棋游戏，实施步骤如下：

• 用JavaScript显示棋盘
• 借助chess.js获取合法走棋并实现可玩游戏
• 搭建服务器实现多人功能，可修改游戏规则以分析网络数据
• 使用Node.js和Socket.io实现多人机制

目前你卡在chess.js的集成环节，该项目仓库仅包含.ts文件，尝试添加到已集成chessboard.js的现有项目中未成功，现有index.html代码如下：

<html>
  <head>
    <title>Chess</title>

    <!-- Import chessboard css -->
    <link rel="stylesheet" href="css/chessboard-1.0.0.min.css">

    <!-- Import jquery -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

    <!-- Import chessboard -->
    <script src="js/chessboard-1.0.0.min.js"></script>
    
    <!-- Import chess.js -->
    <!-- <script src="chess.js"></script> -->

  </head>

  <body>

    <!-- Display chess board -->
    <div id="board1" style="width: 400px"></div>

    <!-- Initialize chess board-->
    <script src="app.js"></script>

  </body>
</html>

以下是几种可行的集成方案：

方案1：使用预编译的JavaScript文件 #

chess.js仓库中已经提供了编译好的JS版本，你可以直接获取dist目录下的chess.min.js文件，将其复制到你的项目js文件夹中，然后修改index.html的引入代码：

<!-- Import chess.js -->
<script src="js/chess.min.js"></script>

方案2：自行编译TypeScript源码 #

如果想要自己编译TS文件，按以下步骤操作：

1. 下载chess.js仓库的源码到本地
2. 进入仓库根目录，执行npm install安装依赖
3. 执行npm run build命令，编译完成后会在dist目录生成JS文件
4. 将生成的JS文件复制到你的项目中，再按方案1的方式引入

方案3：通过CDN直接引入 #

无需下载文件，直接用CDN链接引入编译好的版本：

<!-- Import chess.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/1.0.0/chess.min.js"></script>

验证集成是否成功 #

在你的app.js中添加以下测试代码：

// 初始化chess.js实例
const chessGame = new Chess();
// 打印初始局面的FEN字符串，验证是否加载成功
console.log(chessGame.fen());

打开浏览器控制台，如果能输出rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1，说明chess.js已成功集成。

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