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"]
}

Relaterade artiklar