FiveM x TypeScript

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

eine Ressource erstellen

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 kann.

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, aber im Moment noch drin ist.

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 noch 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();
    }
});

Das obige ist der detaillierte Inhalt vonFiveM x TypeScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!