FiveM x TypeScript

FiveM は、Cfx.re を利用したカスタマイズされた専用サーバーでマルチプレイヤーをプレイできるようにする Grand Theft Auto V の修正です。

FiveM サーバーを開発すると、リソースを作成できます。これらのリソースは、Lua、C#、JavaScript の複数の言語で作成できます。この記事では、TypeScript

を使用してリソースを構築する方法を見ていきます。

タイプ ：

コードを入力するには、FiveM の背後にある会社 CFX.re が提供する 2 つのパッケージを使用します

• @citizenfx/client
• @citizenfx/server

これらのパッケージは、クライアント側またはサーバー側のコード内で使用できる各ネイティブ メソッドの型を提供しました。

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 では、パス、fs などのネイティブの Node.js パッケージの require のみが許可されます。

これを行うには、rollup という名前のツールを使用します。これは、プラグイン システムに基づく JavaScript モジュール バンドラーです。 vite、rspack などの他のツールも検討しましたが、複雑すぎます。優れたパフォーマンスを提供するもう 1 つのツールは、次のバンドルの背後にあるツールとして Turbopack になる予定ですが、現時点ではまだ次のバンドル内にあります。

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 を実行すると、ファイルは 1 つだけになります:

'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 中国語 Web サイトの他の関連記事を参照してください。