我正在尝试使用webpack构建TypeScript浏览器游戏。我的当前配置过去工作正常,但现在我在运行以下命令将应用程序编译为单个.js
文件并启动它时出现以下错误。
npx webpack
个字符
这是我目前在tsconfig.json
中的TypeScript配置:
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"rootDir": "src",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
},
"include": [
"./src/**/*.ts"
],
"exclude": [
"node_modules",
"./src/index.js"
]
}
型
下面是package.json
文件:
{
"name": "favicraft",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "npx webpack",
"build:watch": "npx webpack -w"
},
"devDependencies": {
"ts-loader": "^9.3.0",
"typescript": "^4.6.4",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"webpack": "^5.72.1"
}
}
型
下面是我的webpack.config.js
文件:
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /[node_modules|index.js]/,
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'src'),
},
};
型
从我所看到的,模块解析错误指向我的index.ts
文件中的一行。但是,此文件没有语法错误,也没有可能导致第11:48行错误的奇怪字符。
仅供参考,这是我的index.ts
文件,尽管我不认为它会有任何帮助:
import globals from "./globals";
import { Game } from "./game";
import { sleep } from "./utils";
import { Renderer } from "./renderer";
// Initialize the page
document.addEventListener("DOMContentLoaded", () => {
// Start game listener
// ###### This is the line that is supposed to be causing the error #########
document.getElementById("start-game-button")!.addEventListener("click", () => {
startGame()
});
const canvas = document.getElementById("game-canvas") as HTMLCanvasElement;
// Initialize the canvas
canvas.width = Renderer.WIDTH;
canvas.height = Renderer.HEIGHT;
Renderer.init(canvas);
});
async function startGame(): Promise<void> {
if (globals.playing) {
return;
}
const startGameButton = document.getElementById('start-game-button') as HTMLButtonElement;
startGameButton.hidden = true;
startGameButton.disabled = true;
const title = document.getElementById("start-game-title") as HTMLHeadingElement;
document.body.appendChild(title);
title.innerHTML = "Ready to play?";
await sleep(1000);
title.innerHTML = "Then faster your belt...";
await sleep(1000);
title.innerHTML = "Go!";
await sleep(1000);
title.innerHTML = "";
const game = Game.getInstance();
game.start();
}
型
我已经看过很多类似的问题和答案,但没有一个能解决我的问题。如果你能帮忙的话,我将不胜感激。
3条答案
按热度按时间tmb3ates1#
我找到了解决问题的办法。我在
tsconfig.json
文件中添加了以下编译器选项:字符串
然后,我将
webpack.config.js
文件的rules
字段更改为(并删除了一些冗余配置):型
现在一切都编译成功。我希望这也能帮助其他人。
ewm0tg9j2#
我对此进行了更深入的研究,这取决于配置的设置,但在我的情况下,问题是webpack.config.js中的include选项:
字符串
我把它取下来之后,比如
型
问题消失了。可能会帮助其他正在挣扎的人。
b1zrtrql3#
那一行没有语法错误吗?有一个流氓“!“这里:
字符串