FiveM é uma modificação do Grand Theft Auto V que permite que você jogue multijogador em servidores dedicados personalizados, com tecnologia Cfx.re.

Ao desenvolver um servidor FiveM, você pode criar recursos. Esses recursos podem ser escritos em múltiplas linguagens Lua, C# e JavaScript. Neste artigo veremos como construir um recurso usando TypeScript

Tipo :

Para digitar nosso código, usaremos dois pacotes fornecidos pela CFX.re, a empresa por trás do FiveM

• @citizenfx/cliente
• @citizenfx/servidor

Esses pacotes fornecem tipos para cada método nativo utilizável dentro do código do lado do cliente ou do lado do 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"]
}

Pacote :

Após a compilação dos arquivos .ts, você terá que criar um pacote que será carregado e executado pelo servidor FiveM. Na verdade, FiveM permite apenas exigir pacote node.js nativo como path, fs,…

Para isso, utilizamos a ferramenta chamada rollup, que é um empacotador de módulos JavaScript baseado em sistema de plugins. Também explorei outras ferramentas como vite, rspack, mas é muito complicado. Uma outra ferramenta que oferece bom desempenho será o turbopack, uma ferramenta atrás do próximo pacote, mas ainda dentro do próximo no 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()],
};

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

Exemplo

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

Depois de executar rollup -c, você terá apenas um arquivo:

'use strict';

var path = require('path');

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

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