FiveM x TypeScript

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 등과 같은 기본 node.js 패키지의 require만 허용합니다.

이를 위해 우리는 플러그인 시스템 기반의 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()],
};

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

예시

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

위 내용은 FiveM x TypeScript의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!