typescript1.8 - چگونه میتوانم TypeScript خود را به یک فایل JS واحد بدون سیستم بارگذاری ماژول کامپایل کنم؟

من یک پروژه کوچک تایپاسکریپت دارم که حدود ۱۰ فایل ts دارد. میخواهم تمام فایلهایم را به es5 کامپایل کنم و در یک فایل es5 به نام all.js جمعآوری کنم.

در حال حاضر، با تنظیم tsconfig.json من به صورت

{
  "compilerOptions": {
    "module": "system",
    "target": "es5",
    "outFile": "./all.js"
}

همه چیز در حال کامپایل شدن است، اما هر فایل در حال بستهبندی شدن توسط است

System.register("SomeTSFile", [], function(exports_4, context_4) {
...
}

SystemJS جالب به نظر میرسد اما حال و حوصله یادگیری آن را اکنون ندارم و باور ندارم که ضروری باشد. اگر بتوانم تمام کدهای JS خود را در یک فایل جمع کنم، برای نیازهای من کاملاً کافی خواهد بود.

اگر "module": "system" را از گزینههای کامپایلرم حذف کنم، فایل all.js من کاملاً خالی میشود. ظاهراً این به این دلیل است که به دلایلی نمیتوانید از "modules": none هنگام خروجی گرفتن به یک فایل استفاده کنید. (نمیفهمم چرا)

پاسخ شماره ۱

محتوای فایلهای .ts شما تعیین میکند که آیا این ممکن است یا نه...

اگر از تبدیل کد TypeScript خود به یک ماژول اجتناب کنید (با اجتناب از اعلامیههای import یا export در سطح بالا)، خروجی از کامپایل یکفایلی شامل هیچ وابستگی به یک بارگذار ماژول نخواهد بود.

برای مثال: خود کامپایلر تایپاسکریپت بدون هیچ گونه اعلام import یا export در سطح بالا نوشته شده است و بنابراین به یک فایل .js واحد کامپایل میشود بدون هیچ وابستگی به لودر.

توجه داشته باشید که استفاده آن از export داخل یک فضای نام، یک export «سطح بالایی» نیست. وارد کردنها داخل یک فضای نام امکانپذیر است اما به شدت محدود هستند: یک مثال در اینجا

در TypeScript، درست مانند ECMAScript 2015، هر فایلی که شامل یک واردات یا صادرات سطح بالایی باشد، به عنوان یک ماژول در نظر گرفته میشود.

کتابچه راهنمای تایپاسکریپت

پاسخ شماره ۲

از دستورات سهخطی برای کامپایلر تایپاسکریپت (tsc) استفاده کنید

ارجاعات سهخطی به کامپایلر دستور میدهند تا فایلهای اضافی را در فرآیند کامپایل شامل کند.

index.ts:

/// <reference path="./domHelpers.ts" />

function add(a: number, b: number): number {
    return a + b;
}

q('#sum').textContent = add(2, 5).toString();

domHelpers.ts

function q(query: string): Element {
    return document.querySelector(query);
}

function qa(query: string): NodeListOf<Element> {
    return document.querySelectorAll(query);
}

مرحله ساخت:

tsc --out bundle.js ts/index.ts

فایل bundle.js با محتوا تولید خواهد شد

function q(query) {
    return document.querySelector(query);
}
function qa(query) {
    return document.querySelectorAll(query);
}
/// <reference path="./domHelpers.ts" />
function add(a, b) {
    return a + b;
}
q("#sum").textContent = add(2, 5).toString();