javascript - 跨多个文件的 Typescript 内部模块与 js 缩小

Question

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

每个 typescript 文件的编译 .js 输出包含 3 行自动生成的“样板”，用于每个文件，每个级别的命名空间(顶部 2 行，底部 1 行)。例如，这是一个包含单个空类的 typescript 文件，位于 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 文件，从而去除这些深层命名空间的样板文件？

Answer 1

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

创建外部模块后，您可以使用 --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