FiveM ist eine Modifikation für Grand Theft Auto V, mit der Sie Multiplayer auf benutzerdefinierten dedizierten Servern spielen können, unterstützt von Cfx.re.

Wenn Sie einen FiveM-Server entwickeln, können Sie Ressourcen erstellen. Diese Ressourcen können in mehreren Sprachen wie Lua, C# und JavaScript geschrieben werden. In diesem Artikel erfahren Sie, wie Sie mit TypeScript

Typ :

Für die Eingabe unseres Codes verwenden wir zwei Pakete von CFX.re, dem Unternehmen hinter FiveM

• @citizenfx/client
• @citizenfx/server

Diese Pakete stellten Typen für jede native Methode bereit, die im clientseitigen oder serverseitigen Code verwendet werden konnte.

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    // Location
    "outDir": "./dist",
    // Other
    "types": ["@citizenfx/client", "@types/node"],
    "lib": ["ES2020"],
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["**/node_modules", "**/.test.ts"]
}

Bündel:

Nach der Kompilierung der .ts-Dateien müssen Sie ein Bundle erstellen, das vom FiveM-Server geladen und ausgeführt wird. Tatsächlich erlaubt FiveM nur die Anforderung eines nativen node.js-Pakets wie path, fs, …

Dazu verwenden wir das Tool namens Rollup, einen JavaScript-Modul-Bundler, der auf einem Plugin-System basiert. Ich habe auch andere Tools wie vite und rspack ausprobiert, aber es ist zu kompliziert. Ein weiteres Tool, das eine gute Leistung bietet, ist Turbopack, ein Tool, das hinter der nächsten Bündelung steckt, sich aber im Moment noch in der nächsten befindet.

rollup.config.mjs

import typescript from "@rollup/plugin-typescript";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";

export default {
  input: "src/index.ts",
  output: {
    dir: "dist",
    format: "cjs",
    sourcemap: false,
  },
  plugins: [resolve(), typescript(), commonjs()],
};

package.json:

{
  ...
  "devDependencies": {
    "@citizenfx/client": "2.0.9282-1",
    "@rollup/plugin-commonjs": "^26.0.1",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@rollup/plugin-typescript": "^11.1.6",
    "@types/node": "^20.14.12",
    "rollup": "^4.20.0",
    "tslib": "^2.6.3",
    "typescript": "^5.5.4"
  },
  ...
}

Beispiel

init.ts

import { join } from "path"

export const init = () => {
    console.log("inited", join(".", "init.js"));
}

index.ts

import { init } from "./init"

on("onResourceStart", async (resName: string) => {
  if (resName === GetCurrentResourceName()) {
    init();
  }
});

Nachdem Sie rollup -c ausgeführt haben, haben Sie nur eine Datei:

'use strict';

var path = require('path');

const init = () => {
    console.log("inited", path.join(".", "init.js"));
};

on("onResourceStart", async (resName) => {
    if (resName === GetCurrentResourceName()) {
        init();
    }
});