Javascript 使用typescript编译器从多个js文件中创建单个模块

Javascript 使用typescript编译器从多个js文件中创建单个模块,javascript,typescript,module,Javascript,Typescript,Module,假设我有以下代码文件: /// DoThinger.ts /// class Model { ... } class Viewer { ... } class Controller { ... } export class DoThinger { model: Model; viewer: Viewer; controller: Controller; constructor() { this.model = new Mo

假设我有以下代码文件:

/// DoThinger.ts ///
class Model {
    ...
}
class Viewer {
    ...
}
class Controller {
    ...
}
export class DoThinger {
    model: Model;
    viewer: Viewer;
    controller: Controller;

    constructor() {
        this.model = new Model();
        this.viewer = new Viewer();
        this.controller = new Controller();
    }
    ...
}
(注:AMD模块加载仅用于说明,在本问题的范围内,它可以被任何类型的模块加载所取代) 当使用
“module”:“amd”,“outFile”:“DoThinger.js”
通过typescript编译器运行它时,可以预见,它会产生以下结果:

/// DoThinger.js ///
define("DoThinger", ["require", "exports"], function (require, exports) {
    "use strict";
    var Model = ...
    var Viewer = ...
    var Controller = ...
    var DoThinger = ...
    exports.DoThinger = DoThinger;
});
让我们进一步假设,每个MVC中的代码都变得足够大,以至于难以将其保存在一个巨大的源文件中。因此,每个MVC都有自己的源文件:model.ts、viewer.ts、controller.ts

我的问题是,我不知道如何在不经过一些限制的情况下获得前面提到的编译器结果。我尝试了以下方法:

/// DoThinger.js ///
define("DoThinger", ["require", "exports"], function (require, exports) {
    "use strict";
    var Model = ...
    var Viewer = ...
    var Controller = ...
    var DoThinger = ...
    exports.DoThinger = DoThinger;
});
(0)分离文件并使用//

源文件被分解,并且
DoThinger.ts
是指向现在缺少的定义的前置引用路径。毫不奇怪,输出不是我想要的:

/// DoThinger.js ///
var Model = ...
var Viewer = ...
var Controller = ...
define("DoThinger", ["require", "exports"], function (require, exports) {
    "use strict";
    var DoThinger = ...
    exports.DoThinger = DoThinger;
});
这些定义在全局名称空间中悬而未决(如果我错了,请纠正我)

(1)使用导出/导入

我们的每个MVC源文件前面都有一条
export
语句:

/// model.js ///
export class Model {
    ...
}
当我们的DoThinger的源文件前面有匹配的
导入时

/// DoThinger.ts ///
import { Model } from "./model"
import { Viewer } from "./viewer"
import { Controller } from "./controller"

export class DoThinger {
    ...
}
这将在同一文件中产生多个串联模块:

/// DoThinger.js ///
define("model", ...
define("viewer", ...
define("controller", ...
define("DoThinger", ...
这比(0)好,但远不是我想要的。虽然模型可以稍微解耦,并且确实可以作为自己的模块发布,但是查看器和控制器之间以及与我们的DoThinger之间都有不同程度的耦合,因为它们是DoThinger特有的

我将始终希望加载查看器、控制器和模型(如果没有替换件的话)以及DoThinger

(2)使用生成文件

我完全抛弃了
“outFile”
,将
“module”
改为
“none”
。然后我编写了一个Makefile:

  • 指示tsc将.ts文件编译为.js
  • 连接.js文件
  • 在连接文件的顶部和底部添加所需的模块定义
  • 这样可以获得所需的输出,但考虑到编译器已经有了处理各种模块的翻转和开关,这让人感觉很不舒服



    我觉得我遗漏了什么。

    可能相关:我可以问一下为什么使用导出/导入的
    (1)结果冒犯了你吗?@Paarth,冒犯可能是一个太强的词。我只想要一个普通的DoThinger.js,它可以插入一个无聊的瘦客户端、服务器呈现的网站中的一个无聊的旧标签中,而无需设置任何模块加载器。AMD模块语法只是为了举例说明,假设我使用UML,如果其他方法都失败了,我想将我的库作为一个全局变量来交付。这很公平。您是否考虑过对
    ///@parth使用TS名称空间?如果我将每个文件包装在同一名称空间中,我仍然必须导出要在主文件中使用的MVC类(afaik,
    export
    指定额外的名称空间使用)。诚然,它们都可以作为相同
    var myNameSpace
    的后代很好地编译,但一旦我导出其中一个名称空间,引用路径就会中断,(0)处的问题就会重复。如果我导出名称空间的所有4个实例,我将从(1)中镜像情况。即使我使用
    ///