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

mcsbey

Paylaşım Ekibi
Katılım
2 Ağu 2019
Mesajlar
104
Tepki puanı
1
Yaş
29

İtibar Puanı:

Sıkı Typescript geliştiricisi olarak genellikle kaynak dosyalarınızı temiz tutmak istersiniz. Ancak birlikte gelen dosyalar ile uğraşmak istemezsiniz .
Bu konu nasıl kullanılacağını öğretecek yudum ile FiveM derlemeye Ts dosyaları resourcesdizine.
Gereksinimler:
  • DüğümJs v9 +
  • Temel Typescript ve Javascript bilgisi
Hadi başlayalım:
Kendinizi kaynaklar klasörü seviyesine yerleştirin.
Bir oluşturun src kaynak dosyaları yaşayacak nerede dizini: mkdir src.
Bir oluşturun taze kaynak klasörü : mkdir src/[essential]/ilog.
Bir oluşturma istemci ve sunucu alt dizini: mkdir src/[essential]/ilog/client src/[essential]/ilog/server. Bu içeriğe sahip
bir __resource.lua dosyası oluşturun :
server_scripts {
"server/server_main.js"
}

client_scripts {
"client/client_main.js"
}

Ağaç şöyle görünmeli:
Değerli ziyaretçimiz lütfen, içeriği görüntüleyebilmek için Giriş yap veya Kayıt ol anlayışınız için teşekkürler.

Kaynağınızı kodlayın
Kaynağınızı, genellikle Lua / J’lerde yaptığınız gibi, müşteri ve / veya sunucu altında geliştirin .
Sen gibi birçok oluşturabilirsiniz alt klasörün ans ts istediğiniz gibi.
Her şey nasıl inşa edilir?
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şayacak .
Şimdi aynı yerde bir oluşturmak gulpfile.js dosyası: touch gulpfile.js
Not: gulp is a toolkit for automating painful or time-consuming tasks in your development.
Aşağıdakini yazın:, npm i --save-dev gulp gulp-typescript merge-stream gulp-concatbağımlılıkları kuracaktır.
Gulpfile.js içindeki bağımlılıkları alalım :
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 sadece bir taneye sahibiz:
let folders = ["[essential]/ilog", "mySuperResource2"];

Biz alınan yolu kullandığını unutmayın src .
Yapma görevimiz:
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: beri gulp.src()kullanımda node-glob, biz bizim kaçmak gerekiyor [] yolunda, burada yaptığım tek çözümdür:
// [essential]/ilog -> [[]essential]/ilog
// [essential]/[essential]/ilog -> [[]essential]/[[]essential]/ilog
const escapeBracketPath = path =>
path
.split("[")
.map((val, i) => (i != 0 ? `[]${val}` : val))
.join("[");

Onu çalıştır
  1. gulpGlobal olarak kurabilir ve doğrudan kullanabilirsinizgulp build
  2. Düzenleyebilirsiniz package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "gulp build"
}

ve şimdi bununla inşa görevi başlatmak için sağlayabiliyoruz: npm run build.
İnşa başarılı olursa artık altında kaynak görürsünüz (herhangi Ts hatayı derleme) kaynaklar :
Değerli ziyaretçimiz lütfen, içeriği görüntüleyebilmek için Giriş yap veya Kayıt ol anlayışınız için teşekkürler.

Umarım bu size STRONG Typescript geliştiricisi olmanıza yardımcı olur .
 

Users Who Are Viewing This Konu (Users: 0, Guests: 1)