FiveM x TypeScript

FiveM est une modification pour Grand Theft Auto V vous permettant de jouer en multijoueur sur des serveurs dédiés personnalisés, alimentés par Cfx.re.

Lorsque vous développez un serveur FiveM, vous pouvez créer une ressource. Ces ressources peuvent être écrites en plusieurs langages Lua, C# et JavaScript. Dans cet article nous allons voir comment créer une ressource en utilisant TypeScript

Taper :

Pour taper notre code, nous utiliserons deux packages fournis par CFX.re la société derrière FiveM

• @citizenfx/client
• @citizenfx/serveur

Ces packages fournissaient des types pour chaque méthode native utilisable dans le code côté client ou côté serveur.

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

Paquet :

Après la compilation des fichiers .ts, vous devrez créer un bundle qui sera chargé et exécuté par le serveur FiveM. En effet, FiveM permet uniquement d'exiger des packages node.js natifs comme path, fs, …

Pour ce faire, nous utilisons l'outil nommé rollup, c'est un bundler de modules JavaScript basé sur un système de plugins. J'ai aussi exploré d'autres outils comme vite, rspack, mais c'est trop compliqué. Un autre outil qui offre de bonnes performances sera turbopack, un outil derrière le prochain regroupement mais il est toujours à l'intérieur pour le moment.

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"
  },
  ...
}

Exemple

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

Après avoir exécuté rollup -c, vous n'aurez qu'un seul fichier :

'use strict';

var path = require('path');

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!