网站搜索

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

我有一个大约包含 10 个 ts 文件的小型 Typescript 项目。我想将所有文件编译成 es5，并合并成一个名为 all.js 的 es5 文件。

目前，我的 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 或其他复杂操作？

答案＃1

你的 .ts 文件的内容决定了这是否可能...

如果你避免将你的 TypeScript 代码变成模块（通过避免顶层 import 或 export 声明），单文件编译的输出将不会包含对模块加载器的任何依赖。

例如：TypeScript 编译器本身的编写没有任何顶级导入或导出声明，因此可以编译成一个单文件 .js，而不依赖任何加载器。

请注意，它在命名空间中使用 export 并不是“顶层”导出。命名空间内的导入是可能的，但受到严格限制：示例如下

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

TypeScript 手册

答案＃2

在 TypeScript 编译器 (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();

相关文章