使用typescript编译器

时间:2016-09-18 13:20:23

标签: javascript typescript module

我们假设我有以下代码文件:

/// 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。

我的问题是我无法弄清楚如何在不跳过一些箍的情况下获得上述编译器结果。我尝试过以下方法:

(0)分隔文件并使用///< reference path =“”/>

源文件已细分,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源文件前缀为imports

/// 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)使用Makefile

我完全抛弃"outFile"并将"module"更改为"none"。然后我写了一个Makefile:

  1. 指示tsc将.ts文件编译为.js
  2. 连接.js文件
  3. 在连接文件的顶部和底部添加所需的模块定义。
  4. 这可以获得所需的输出,但考虑到编译器已经有翻转和处理各种模块的开关,它会感觉很乱。

    我觉得我错过了什么。

0 个答案:

没有答案