FiveM هو تعديل للعبة Grand Theft Auto V مما يتيح لك اللعب المتعدد على خوادم مخصصة، مدعومة من Cfx.re.

عند تطوير خادم FiveM، يمكنك إنشاء الموارد. يمكن كتابة موارد الأطروحات بلغات متعددة مثل Lua وC# وJavaScript. سنرى في هذه المقالة كيفية إنشاء مورد باستخدام TypeScript

يكتب :

لكتابة الكود الخاص بنا، سنستخدم حزمتين مقدمتين من CFX.re الشركة التي تقف وراء FiveM

• @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 فقط بطلب حزمة Node.js الأصلية مثل المسار، وFS، ...

للقيام بذلك، نستخدم الأداة المسماة تراكمي، وهي عبارة عن أداة تجميع وحدات JavaScript تعتمد على نظام المكونات الإضافية. لقد استكشفت أيضًا أدوات أخرى مثل vite وrspack، ولكنها معقدة للغاية. هناك أداة أخرى تقدم أداءً جيدًا وهي 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();
  }
});

بعد تشغيل تراكمي -c، سيكون لديك ملف واحد فقط:

'use strict';

var path = require('path');

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

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