FiveM es una modificación de Grand Theft Auto V que te permite jugar multijugador en servidores dedicados personalizados, con tecnología de Cfx.re.

Cuando desarrollas un servidor FiveM, puedes crear recursos. Estos recursos se pueden escribir en múltiples idiomas Lua, C# y JavaScript. En este artículo veremos cómo crear un recurso usando TypeScript

Tipo :

Para escribir nuestro código, usaremos dos paquetes proporcionados por CFX.re, la compañía detrás de FiveM

• @citizenfx/cliente
• @citizenfx/servidor

Estos paquetes proporcionaron tipos para cada método nativo utilizable dentro del código del lado del cliente o del lado del servidor.

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

Manojo :

Después de la compilación de los archivos .ts, deberá crear un paquete que el servidor FiveM cargará y ejecutará. De hecho, FiveM solo permite requerir el paquete nativo node.js como ruta, fs,…

Para hacerlo, utilizamos la herramienta llamada rollup, es un paquete de módulos JavaScript basado en un sistema de complementos. También exploré otras herramientas como vite, rspack, pero es demasiado complicado. Otra herramienta que ofrece un buen rendimiento será turbopack, una herramienta detrás del próximo paquete, pero que todavía está dentro del siguiente por el momento.

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

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

Ejemplo

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

Después de ejecutar rollup -c, solo tendrás un archivo:

'use strict';

var path = require('path');

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

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