Rehber - [Nasıl Yapılır] Typescript kaynağınızı / resources klasörünüze entegre edin

Fivem.com.tr

Fivem.com.tr
Katılım
1 Eki 2022
Mesajlar
5,891
Tepki
84
2026-478040536830922ed4ba702fc55a6af3.jpg




2027-3a7a601251b52ed690c76692db3f61ae.jpg





Merhaba, genellikle kaynak dosyalarınızı temiz tutmak istersiniz. Bununla birlikte, packed dosyalarla uğraşmak istemezsiniz .



Bu konu, resources dizininde .ts dosyalarını derlemek için FiveM ve gulp'u nasıl kullanacağınızı öğretecektir.



Gereksinimler:



NodeJs v9

Temel Typescript ve Javascript bilgisi




?



Hadi başlayalım:



Kendinizi resources klasörü düzeyine koyun.

Kaynak dosyalarınızın yaşayacağı bir src dizini oluşturun: mkdir src.

Yeni bir kaynak klasörü oluşturun: mkdir src / [essential] / ilog.

Bir istemci ve bir sunucu alt dizini oluşturun: mkdir src / [essential] / ilog / client src / [essential] / ilog / server.

Bu bağlamla bir __resource.lua dosyası oluşturun





Kod:


Kod:
server_scripts {[/B][/CENTER]
[B][CENTER]    "server/server_main.js"
}

client_scripts {
    "client/client_main.js"
}





Sıra şu şekilde görünmelidir.



2028-4b78802d46462dc8730d912c4bad43a7.jpg





Kaynağınızı kodlayın



Kaynağınızı, Lua / Js'de genellikle yaptığınız gibi istemci ve / veya sunucu altında geliştirin .

İstediğiniz kadar alt klasör ve .ts oluşturabilirsiniz .



Her şey nasıl kurulur?



Bir npm paketi başlatmadıysanız , lütfen npm initen üst düzeyde yapın, böylece package.json src ve kaynakların yanında yaşayacaktır .



Şimdi aynı yerde, bir oluşturmak gulpfile.js dosyası: touch gulpfile.js



Not: gulp, geliştirmenizdeki zorlu veya zaman alıcı görevleri otomatikleştirmek için bir araç setidir.



Aşağıdakini yazın:, npm i --save-dev gulp gulp-typescript merge-stream gulp-concat bağımlılıkları kuracaktır.



Gulpfile.js
içindeki bağımlılıkları içe aktaralım :





Kod:


Kod:
const gulp = require("gulp");
const ts = require("gulp-typescript");
const fs = require("fs");
const path = require("path");
const merge = require("merge-stream");
const concat = require("gulp-concat");



Şimdi, "kaynak listemizi" oluşturacağız, örneğin elimizde sadece bir tane var:





Kod:


Kod:
let folders = ["[essential]/ilog", "mySuperResource2"];



Toplama İşlemimiz:





Kod:


Kod:
gulp.task("build", function() {
  let tasks = [];

  // For each resource path in folder:
  folders.map(el => {
    // If there's a server folder
    if (fs.existsSync(path.join("src", el, "server"))) {
      tasks.push(
        gulp
          .src(`src/${escapeBracketPath(el)}/server/**/*.ts`)
          .pipe(
            ts({
              noImplicitAny: true,
              module: "commonjs"
            })
          )
          .pipe(concat("main_server.js"))
          .pipe(gulp.dest(`resources/${el}/server/`))
      );
    }
    // If there's a client folder
    if (fs.existsSync(path.join("src", el, "client"))) {
      tasks.push(
        gulp
          .src(`src/${escapeBracketPath(el)}/client/**/*.ts`)
          .pipe(
            ts({
              noImplicitAny: true,
              module: "system",
              outFile: "client_main.js"
            })
          )
          .pipe(concat("main_client.js"))
          .pipe(gulp.dest(`resources/${el}/client/`))
      );
    }
    // Copy the __resource.lua
    tasks.push(
      gulp
        .src(`src/${escapeBracketPath(el)}/__resource.lua`)
        .pipe(gulp.dest(`resources/`))
    );
  });

  // Merge all steams together
  return merge(tasks);
});



Not: gulp.src kullanımdan beri , yolda node-glob yolumuzdan kaçmamız gerekiyor , o yüzden çözümü;





Kod:


Kod:
// [essential]/ilog -> [[]essential]/ilog
// [essential]/[essential]/ilog -> [[]essential]/[[]essential]/ilog
const escapeBracketPath = path =>
  path
    .split("[")
    .map((val, i) => (i != 0 ? `[]${val}` : val))
    .join("[");



Şimdide çalıştıralım:



gulpGlobal olarak kurabilir ve doğrudan kullanabilirsiniz



gulp buildDüzenleyebilirsiniz package.json:






Kod:


Kod:
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "gulp build"
}



ve şimdi bununla kurulum görevini başlatmak için sağlayabiliyoruz: npm run build.



2029-a2bf30099cd27e956eb839c42414417b.jpg





Umarım bu, GÜÇLÜ bir Typescript geliştiricisi olmanıza yardımcı olur .

2030-478040536830922ed4ba702fc55a6af3.jpg



X Y Z















































Özgürlük, özgür olduğunu iddia etmek değil, özgür yaşamaktır -William Faulkner

Konu alıntıdır, yanlış veya hatalı bir bilgi/paylaşım var ise yanıtlayabilir veya bizimle iletişime geçebilirsiniz.
 

Şu anda bu konu'yu okuyan kullanıcılar

Benzer konular

Üst