FiveM은 Grand Theft Auto V의 수정 버전으로, Cfx.re가 제공하는 맞춤형 전용 서버에서 멀티플레이어를 플레이할 수 있습니다.

FiveM 서버를 개발할 때 리소스를 생성할 수 있습니다. 이러한 리소스는 여러 언어의 Lua, C# 및 JavaScript로 작성될 수 있습니다. 이 기사에서는 TypeScript

유형 :

코드를 입력하기 위해 FiveM을 지원하는 회사인 CFX.re에서 제공하는 두 개의 패키지를 사용합니다.

• @citizenfx/클라이언트
• @citizenfx/서버

이러한 패키지는 클라이언트 측 또는 서버 측 코드 내에서 사용할 수 있는 각 기본 메서드에 대한 유형을 제공했습니다.

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

번들:

.ts 파일을 컴파일한 후 FiveM 서버에서 로드하고 실행할 번들을 생성해야 합니다. 실제로 FiveM은 path, fs, …

이를 위해 우리는 플러그인 시스템을 기반으로 하는 JavaScript 모듈 번들러인 롤업이라는 도구를 사용합니다. vite, rspack과 같은 다른 도구도 살펴봤지만 너무 복잡합니다. 좋은 성능을 제공하는 또 다른 도구는 다음 번들링 뒤에 있는 도구인 터보팩이 될 것이지만 현재는 여전히 다음 번들에 포함되어 있습니다.

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

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

예시

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

rollup -c를 실행하면 파일이 하나만 생성됩니다.

'use strict';

var path = require('path');

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

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