如何使用BlazeJS在MeteorJS中同时使用Chessboard.js和Chess.js？

我有一个新的MeteorJS项目，我只安装了如下

meteor npm install --save chessboardjs
meteor npm install --save chess.js

在我的客户端

main.js

中，我还导入了上述包，如下所示：

import Chessboardjs from 'chessboardjs';
import Chessjs from 'chessjs';

根据chessboardjs文档，显示棋盘的方式如下：

import Chessboardjs from 'chessboardjs';
import Chessjs from 'chessjs';

用于html

<div id="board1" style="width: 400px"></div>

我的问题是如何在MeteorJS中显示这一点，以及如何让两个国际象棋npm包一起工作

任何工作实例都将受到高度赞赏

---

也许我还应该提到，整个目的是要有一个两人游戏。

这里有三个问题

输入打字错误

导入css

渲染

首先，导入和调用的函数必须相同。你是

从“Chessboardjs”导入Chessboardjs；
从“Chessjs”导入Chessjs；

但它们应该是

从“chessboardjs”导入棋盘；
从“chess.js”导入Chessjs；

其次，npm包导入通常也不会自动导入css。您需要在

node\u modules/chessboardjs

文件夹中主动定位它的路径并导入它：

import'chessboardjs/www/css/chessboard.css'

最后，

Chessboard

函数无法将代码注入DOM，如果目标元素（id为

board1

的div）尚未呈现

要解决此问题，您需要在

onRendered

中调用它：

Template.myTemplate.onRendered（函数（）{
var board1=棋盘（'board1'，'start'）
})

它在

onCreated

中不起作用，因为在第一次呈现模板之前调用

onCreated

回调

---

请参见

我尝试了上面的方法，它呈现了一个带有棋盘数字的页面，但缺少样式。那么我该如何包含样式？我更新了我的答案，基本上只是增加了一行。问题的第二部分是如何与

chess.js

集成，以便验证这些动作？我认为这将超越一个问题。你可以自己先试一下，例如，试着用被动语录保存状态和动作，当ypu被卡住时，打开一个特定的问题。谢谢@Jankapunkt，你帮了大忙。