javascript - Hur man kompilerar ts-filer i public-mappen i ett next.js-projekt
Jag har ett next.js-projekt och jag vill göra ett litet spel i min public-mapp. Next.js-projektet är ett typescript-projekt och alla tsx-filer fungerar korrekt. Jag försökte implementera ts-filer i min public-mapp också, men de kompileras inte korrekt
min mappstruktur är följande: rootfolder/pages/game.tsx rootfolder/public/game/app.ts
Jag körde redan tsc tsc public/game/app.ts för att kompilera ts-filen till en JavaScript-fil. Felmeddelandet jag får i webbläsaren är: Unhandled Runtime Error ReferenceError: exports is not defined
Jag vet inte hur jag ska ta mig runt detta.
Mina filer ser för närvarande ut så här:
game.tsx
import Head from 'next/head';
import Script from 'next/script';
export default function Game() {
return (
<>
<Head>
<title>My Game</title>
</Head>
<Script type='module' src='game/app.js' />
<div className='h-[100vh] bg-gray-600 flex justify-center items-center'>
<div className='game-container scale-125'>
<canvas
className='game-canvas border-2 border-gray-300'
width='700px'
height='400px'
/>
</div>
</div>
</>
);
}
app.ts
console.log('hi');
export default {};
app.js
"use strict";
exports.__esModule = true;
console.log('hi');
exports["default"] = {};
ts.config
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": false,
"esModuleInterop": true,
"noUnusedLocals": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"public/game/app.js",
"public/game/app.ts"
],
"exclude": ["node_modules"]
}