如何在Rails 6中正确实现chess.js功能，解决Chess未定义报错

该功能可以在Rails 6中正常运行，报错原因是Webpacker默认对打包模块做作用域隔离，不会主动暴露到全局window作用域，且浏览器原生不支持直接在内联脚本中使用require/import语法，具体实现步骤如下：

步骤1：安装依赖 #

直接通过yarn安装chess.js即可，无需手动复制模块文件到项目目录：

yarn add chess.js

步骤2：配置脚本逻辑 #

有两种常用实现方式，按需选择即可：

方式一：逻辑全部放在Webpacker管理的脚本中（更推荐） #

直接修改app/javascript/packs/application.js，添加如下代码：

import Chess from 'chess.js'

// 适配Turbolinks加载时机，Rails 6默认开启Turbolinks
document.addEventListener('turbolinks:load', function() {
  const chess = new Chess()
  while (!chess.game_over()) {
    const moves = chess.moves()
    const move = moves[Math.floor(Math.random() * moves.length)]
    chess.move(move)
  }
  console.log(chess.pgn())
})

采用该方式不需要在erb页面中写任何额外脚本，只要你的布局文件app/views/layouts/application.html.erb中默认存在<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>引入即可。

方式二：暴露Chess到全局，在内联脚本中使用 #

如果需要在erb的内联脚本中调用Chess，先修改app/javascript/packs/application.js，添加如下代码将Chess挂载到全局：

import Chess from 'chess.js'
window.Chess = Chess

再修改你的index.html.erb内联脚本，适配加载时机：

<script>
document.addEventListener('turbolinks:load', function() {
  const chess = new Chess()
  while (!chess.game_over()) {
    const moves = chess.moves()
    const move = moves[Math.floor(Math.random() * moves.length)]
    chess.move(move)
  }
  console.log(chess.pgn())
})
</script>

常见问题说明 #

• 不要在erb的内联<script>标签中使用require/import语法，这类语法仅在Node.js环境或Webpack打包阶段被识别，浏览器原生不支持
• 如果你的项目关闭了Turbolinks，将监听事件替换为DOMContentLoaded即可
• 不需要手动将node_modules中的chess.js复制到app/javascript目录，Webpacker会自动从node_modules中查找导入的模块

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