跨多个文件的打字稿内部模块与 js 缩小答案

【问题标题】：Typescript internal modules across multiple files vs js minification跨多个文件的打字稿内部模块与 js 缩小
【发布时间】：2015-07-15 09:21:49
【问题描述】：

我正在处理一个大型打字稿项目。我更喜欢创建许多小类并将每个类放在一个单独的文件中，并使用深度嵌套的命名空间（打字稿中的“内部模块”）。我认为这是一种很好的做法，因为它鼓励封装、可测试性、可重用性等。我有一百多个带有深度命名空间的小型打字稿文件。

每个 typescript 文件的编译 .js 输出包含 3 行自动生成的“样板”，每个文件，每个级别的命名空间（顶部 2 个，底部一个）。例如，这是一个打字稿文件，其中包含一个空类，位于 4 级命名空间内：

module a.b.c.d {
    export class MyClass {
        constructor() {
        }
    }
}

这会编译成以下 .js：

var a;
(function (a) {
    var b;
    (function (b) {
        var c;
        (function (c) {
            var d;
            (function (d) {
                var MyClass = (function () {
                    function MyClass() {
                    }
                    return MyClass;
                })();
                d.MyClass = MyClass;
            })(d = c.d || (c.d = {}));
        })(c = b.c || (b.c = {}));
    })(b = a.b || (a.b = {}));
})(a || (a = {}));

为了提高性能，我想将我的 .js 文件合并/缩小为单个文件以用于生产。如果我只是以正确的顺序附加文件，则将针对每个文件重复进出命名空间的样板文件。对于小型 .ts 文件，这将包含大量开销。

我的问题：在顺序 .js 文件共享相同命名空间的情况下，是否有某种方法可以合并/缩小我的 .js 文件，从而去除这些深层命名空间的样板文件？

【问题讨论】：

优化这个问题最简单的方法是使用压缩（例如gzip）——这种重复处理得很好。
您使用任何类型的构建过程吗？您是否尝试过在单个文件中编译？我这样做了，但实际上从未检查过此开销代码的冗余。
开销应该不是那么大的问题，因为命名空间的创建只运行一次，而且一切都只设置一次？如果您提到的文件大小开销肯定是一个问题，我不确定是否有一个简单的解决方法。

标签： javascript namespaces typescript minify

【解决方案1】：

我了解从内部模块迁移到外部模块可能需要大量工作，但这是您未来的最佳选择。

创建外部模块后，您可以使用 --module 标志将 TypeScript 代码编译为 CommonJS 或 AMD 模块：

tsc myfile.ts --module "amd" 
tsc myfile.ts --module "commonjs"

然后您可以使用the require.js optimizer 将应用程序中的所有 AMD 模块捆绑到一个优化的文件中。

如果您使用 commonJS，您可以使用 Browserify 将所有外部模块捆绑到一个优化文件中。希望对您有所帮助。

我创建了一个 Github 项目来展示如何自动化这个过程https://github.com/remojansen/modern-workflow-demo

【讨论】：