TypeScript 捆绑和缩小？答案

【问题标题】：TypeScript bundling and minification?TypeScript 捆绑和缩小？
【发布时间】：2013-06-27 10:20:13
【问题描述】：

假设我有两个文件

AFile.ts

/// <reference path="ZFile.ts" />
new Z().Foo();

ZFile.ts

class Z
{
    Foo() { }
}

有没有办法按照需要的顺序在单个js 文件中生成所有脚本（需要ZFile 在AFile 之前获得Z 的定义）？

【问题讨论】：

【解决方案1】：

在构建后事件中，我添加了对 TypeScript 编译器的调用

tsc "..\Content\Scripts\Start.ts" --out "..\Content\Scripts\all.js"

在我添加的捆绑配置中

bundles.Add(new ScriptBundle("~/scripts/all").Include("~/Content/Scripts/all.js"));

在我添加的_Layout.cshtml 文件中

@Scripts.Render("~/Scripts/all")

然后我得到了

<script src="/Scripts/all?v=vsTcwLvB3b7F7Kv9GO8..."></script>

这是我在一个文件中的所有脚本。

编译器不会缩小，你必须使用 bundles 并在 Release 或 set 上编译

BundleTable.EnableOptimizations = true;

您还可以使用 Web Essentials 缩小或抓取内容并在其他地方缩小。

【讨论】：

如何阻止它在保存时自动编译？你必须指定每个文件还是我们可以使用通配符？
您可以使用IncludeDirectory() 包含所有文件 :-) 另请参阅：stackoverflow.com/questions/12926830/…
捆绑中是否有错误 .Include("~/Content/Scripts/all.ts")); ?

【解决方案2】：

现在 VS Typescript 扩展支持合并到一个文件。
确保你已经安装了扩展Tools -> Extensions and Updates（VS2015默认有）

转到项目属性并检查Combine JavaScript output into file：

拥有/// <reference />（如问题）很重要，它有助于tsc 在合并之前按依赖项排序文件。

然后可以像往常一样使用最小化捆绑包：

bundles.Add(new ScriptBundle("~/bundles/finale").Include("~/js/all.js"));

在视野中

@Scripts.Render("~/bundles/finale")

【讨论】：

【解决方案3】：

使用 --out 参数。

tsc AFile.ts ZFile.ts --out single.js

typescript 编译器会自动为你做依赖导航。

【讨论】：

【解决方案4】：

假设您的所有 ts 文件直接或间接位于名为 say 'ts' 的文件夹下，您可以编写一个 tt 脚本，将所有 .js 文件（但不是 min.js）合并到文件 myApp.js 和所有你的 min.js 文件到 myApp.min.js 中。

要获得文件的顺序，您可以这样处理子文件夹：

string[] FolderOrder =
{
    @"libs\utils\",
    @"libs\controls\",
    @"app\models",
    @"app\viewmodels",
    @".",
};

【讨论】：