「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > FiveM x TypeScript

FiveM x TypeScript

2024 年 11 月 8 日に公開
ブラウズ:858

FiveM x TypeScript

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

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

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

タイプ :

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

  • @citizenfx/クライアント
  • @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 は path、fs、…

のようなネイティブの Node.js パッケージの require のみを許可します。

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

ロールアップ.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"));
}

インデックス.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();
    }
});

リリースステートメント この記事は次の場所に転載されています: https://dev.to/justinmartindev/fivem-x-typescript-3pgd?1 侵害がある場合は、[email protected] に連絡して削除してください。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3