如何在外部JS文件中使用HTML页面加载的全局变量Chessboard

chessboard.js 属于传统的非ES模块格式脚本，加载完成后会自动将Chessboard方法挂载到全局window对象上，不需要用import语法引入，只要保证外部JS的加载顺序正确即可直接调用，具体实现步骤如下：

步骤1：创建独立JS文件 #

新建board-init.js文件，直接写入原内嵌脚本的代码即可，不需要添加任何import语句：

var board2 = Chessboard("board1", "start");

如果需要将JS文件放在head标签中引入，为了避免DOM未加载完成导致找不到#board1元素的报错，可以添加DOM加载完成监听：

document.addEventListener('DOMContentLoaded', function() {
  var board2 = Chessboard("board1", "start");
})

步骤2：调整HTML中脚本引入顺序 #

只需要保证独立JS的引入位置在chessboard.js加载之后，且在对应DOM元素（#board1）渲染之后即可，修改后的HTML代码如下：

<html lang="en">
  <head>
    <link rel="stylesheet" href="./chessboardFiles/css/chessboard-1.0.0.min.css" />
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="./chessboardFiles/js/chessboard-1.0.0.js"></script>
    <title></title>
  </head>
  <body>
    <div id="board1" style="width: 400px"></div>
    <!-- 独立JS放在chessboard.js和DOM元素之后引入 -->
    <script src="./board-init.js"></script>
  </body>
</html>

报错原因说明 #

你之前遇到的MIME类型报错，是因为只有给script标签添加type="module"属性时，浏览器才会将其识别为ES模块支持import语法，而你引入的chessboard.js本身没有做ESM规范的导出，就算MIME类型正确也无法通过import拿到导出内容；另外返回text/html类型一般是因为import时填写的文件路径错误，服务器返回了404页面。

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