I want to import an npm named chess.js created in Typescript to html.
I would also like to ask about the correct placement of files and directories when doing npm related development such as Chess.js.
You can check the installed npm at the following URL.
https://github.com/jhlywa/chess.js/tree/master
Note that the code on github is from the test environment and the installed npm has already been built.
In my environment, I have the following files and directories.
(d)node_modules
--(d)chess.js
--(d)dist
--(d)cjs
--chess.js
--chess.js.map
--(d)esm
--chess.js
--chess.js.map
--(d)types
--chess.d.ts
--(d)src
--chess.ts
--Multiple json files
--(d)Multiple npm
--index.html
--(d)js
--game.js
All npm is installed locally.
No changes were made to the file on github.
Not sure if this is correct, here is what I have for index.html and game.js
// index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Chess Game</title>
<link rel="stylesheet"
href="https://unpkg.com/@chrisoakman/[email protected]/dist/chessboard-1.0.0.min.css"
integrity="sha384-q94+BZtLrkL1/ohfjR8c6L+A6qzNH9R2hBLwyoAfu3i/WCvQjzL2RQJ3uNHDISdU"
crossorigin="anonymous">
</head>
<body>
<div id="board" style="width: 522px"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2"
crossorigin="anonymous"></script>
<script src="js/chessboard.min.js"></script>
<script src="node_modules/chess.js/dist/cjs/chess.js"></script>
<script src="game.js"></script>
</body>
</html>
The top two scripts in index.html are chessboard.js, which is a script for drawing chessboard.
// game.js
// import { Chess } from "./node_modules/chess.js/dist/esm/chess.js";
var board = null
var cfg = {
draggable: true,
position: 'start',
onDragStart: onDragStart,
onDrop: onDrop,
onSnapEnd: onSnapEnd
};
board = new ChessBoard('board', cfg);
var game = new Chess();
var onDragStart = function(source, piece, position, orientation) {
if (game.in_checkmate() === true || game.in_draw() === true ||
piece.search(/^b/) !== -1) {
return false;
}
};
var cpuMove = function() {
var possibleMoves = game.moves();
if (possibleMoves.length === 0) return;
var randomIndex = Math.floor(Math.random() * possibleMoves.length);
game.move(possibleMoves[randomIndex]);
board.position(game.fen());
};
var onDrop = function(source, target) {
var move = game.move({
from: source,
to: target,
promotion: 'q'
});
if (move === null) return
window.setTimeout(cpuMove, 250);
};
var onSnapEnd = function() {
board.position(game.fen());
};
game.js also includes processing for chessboard.js
Below is what I tried and what it displayed in the console.
In the current code, the first export in dist/cjs/chess.js and Chess in game.js give an X is not defined error.
If the import statement in the first line of game.js is uncommented, the error Cannot use import statement outside a module occurs, and the chessboard described in the middle of game.js is not even described.
At first, I used import { Chess } from ‘chess.js’; for the import statement of game.js, as described in github, but this also works the same as above.
I tried changing the dist/cjs/chess.js section on index.html to chess.js, but of course it does not exist, so I get an Unexpected token ‘<‘ error, and when I look at chess.js in the console, it is a weird html file.
I end up not knowing how to import npm Chess.js on html (web)
山下雄史 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.