如何将我的Typescript编译成一个没有模块加载系统的JS文件？

Question

我有一个大约10个ts文件的小型Typescript项目.我想将我的所有文件编译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编译成一个JS文件,而不必涉及SystemJS或任何其他复杂情况？

Answer 1

对打字稿编译器 (tsc)使用三斜杠指令

三斜线引用指示编译器在编译过程中包含其他文件。

索引.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();

Answer 2

您的.ts文件内容决定了这是否可行...

如果您避免将 TypeScript 代码转换为模块（通过避免顶级import或export声明），则单文件编译的输出将不包含对模块加载器的任何依赖。

例如：typescript 编译器本身是在没有任何顶级导入或导出声明的情况下编写的，因此编译成一个.js没有任何加载器依赖性的单个文件。

请注意，它export在命名空间中的使用不是“顶级”导出。名称空间内的导入是可能的，但受到严重限制： 此处的示例

“在 TypeScript 中，就像在 ECMAScript 2015 中一样，任何包含顶级导入或导出的文件都被视为一个模块。”

打字稿手册

Answer 3

你可以使用编译器本身吗？- 作为构建后过程。TSC 接受论据，允许您这样做。

tsc --out compiledSingleFile.js one.ts two.ts

或者在构建管道中使用 Gulp -

https://www.npmjs.com/package/gulp-tsc