如何在Electron项目中引入并使用chessboardjs库

首先补充安装依赖：@chrisoakman/chessboardjs 运行依赖jQuery，需先完成安装：

npm install jquery --save

根据你的项目所用的模块规范，选择对应的引入方式即可：

方式1：CommonJS 引入（Electron 默认兼容的模块规范） #

// 引入jQuery并挂载到全局作用域，供chessboardjs调用
const $ = require('jquery')
window.$ = window.jQuery = $
// 引入chessboardjs核心库
const Chessboard = require('@chrisoakman/chessboardjs')
// 引入棋盘配套样式
require('@chrisoakman/chessboardjs/dist/chessboard-1.0.0.min.css')

方式2：ES Module 引入（项目配置了ES模块支持时使用） #

// 引入jQuery并挂载到全局作用域，供chessboardjs调用
import $ from 'jquery'
window.$ = window.jQuery = $
// 引入chessboardjs核心库
import Chessboard from '@chrisoakman/chessboardjs'
// 引入棋盘配套样式
import '@chrisoakman/chessboardjs/dist/chessboard-1.0.0.min.css'

完成引入后即可按官方示例使用棋盘：

• 在HTML中添加棋盘容器：<div id="board" style="width: 400px"></div>
• 在JS中初始化棋盘：const board = Chessboard('board', 'start')

注意事项 #

• 新版本Electron默认开启contextIsolation，此时直接在渲染进程引入依赖会失效，你可以在preload脚本中完成依赖引入和方法暴露，也可以临时关闭contextIsolation用于本地测试（生产环境不建议关闭，会降低安全性）
• 如果棋盘样式显示异常，可以进入node_modules/@chrisoakman/chessboardjs/dist目录核对CSS文件的实际名称，调整引入路径即可

内容的提问来源于stack exchange，提问作者Aggressive-Support35