javascript - typescript :生成文件中的连接顺序

Question

我有一个 ts (angularjs) 项目并使用引用文件来指定依赖项的顺序。但是，它没有正确排序。在生成的 js 文件中，controller 文件在最后，它应该在 module.js 之前。因此，它在运行时给出错误，作为模块中引用的 TestCtrl

test.am.controller(mod.test.TestCtrl.ID, [mod.test.TestService.ID, function (srv) {
                return new mod.test.TestCtrl(srv);
            }]);

那么，为什么不遵循 references 文件中的顺序？生成文件中的任何原因 controller 文件不包含在 module 之前，尽管它在 module.ts 文件中被引用。

我用grunt-ts编译文件，命令是

Running "ts:dev" (ts) task
Verifying property ts.dev exists in config...OK
Files: src/controller.ts, src/module.ts, src/names.ts, src/reference.ts, src/service.ts
Options: allowBool=false, allowImportModule=false, compile, declaration=false, mapRoot="", module="amd", noImplicitAny=false, noResolve=false, comments, removeComments=null, sourceMap, sourceRoot="", target="es3", verbose=false, fast="watch"
Compiling...
Cleared fast compile cache for target: dev
Fast compile will not work when --out is specified. Ignoring fast compilation
Using tsc v0.9.5
"/Users/test/order2/src/controller.ts" "/Users/test/order2/src/module.ts" "/Users/test/order2/src/names.ts" "/Users/test/order2/src/reference.ts" "/Users/test/order2/src/service.ts" --sourcemap --target ES3 --module amd --out out.js

ps: grunt-ts 支持reference-file-generation，但我暂时不想用。

引用.ts

/// <reference path="angularjs/angular.d.ts" />

/// <reference path="names.ts" />
/// <reference path="service.ts" />
/// <reference path="controller.ts" />
/// <reference path="module.ts" />

名称.ts

//names section

/// <reference path="reference.ts" />

module mod{
    export module test{
        export var ID = "test"
    }
}

服务.ts

//service section

/// <reference path="reference.ts" />

module mod{
    export module test{

        export interface ITestService {
        }
        export class TestService implements ITestService {
                        static ID = ""           
        }
    }
}

Controller .ts

//controller section

/// <reference path="reference.ts" />

module mod{
    export module test{

        export interface ITestCtrl {
        }

        export class TestCtrl implements ITestCtrl {
            static ID = ""
            constructor(private rec:ITestService) {
            }
        }
    }
}

模块.ts

//modules section

/// <reference path="reference.ts" />

module mod{
    export module test{
        export var am:ng.IModule = angular.module(test.ID, ['ngRoute']);
        am.controller(TestCtrl.ID, [TestService.ID, (srv:ITestService) => new TestCtrl(srv)]);
    }
}

生成的文件(js)

//names section
/// <reference path="reference.ts" />
var mod;
(function (mod) {
    (function (test) {
        test.ID = "test";
    })(mod.test || (mod.test = {}));
    var test = mod.test;
})(mod || (mod = {}));
//service section
/// <reference path="reference.ts" />
var mod;
(function (mod) {
    (function (test) {
        var TestService = (function () {
            function TestService() {
            }
            TestService.ID = "";
            return TestService;
        })();
        test.TestService = TestService;
    })(mod.test || (mod.test = {}));
    var test = mod.test;
})(mod || (mod = {}));
//modules section
/// <reference path="reference.ts" />
var mod;
(function (mod) {
    (function (test) {
        test.am = angular.module(mod.test.ID, ['ngRoute']);
        test.am.controller(mod.test.TestCtrl.ID, [mod.test.TestService.ID, function (srv) {
                return new mod.test.TestCtrl(srv);
            }]);
    })(mod.test || (mod.test = {}));
    var test = mod.test;
})(mod || (mod = {}));
//controller section
/// <reference path="reference.ts" />
var mod;
(function (mod) {
    (function (test) {
        var TestCtrl = (function () {
            function TestCtrl(rec) {
                this.rec = rec;
            }
            TestCtrl.ID = "";
            return TestCtrl;
        })();
        test.TestCtrl = TestCtrl;
    })(mod.test || (mod.test = {}));
    var test = mod.test;
})(mod || (mod = {}));
//# sourceMappingURL=out.js.map

Answer 1

这是因为传递给编译器的命令:

"/Users/test/order2/src/controller.ts" "/Users/test/order2/src/module.ts" "/Users/test/order2/src/names.ts" "/Users/test/order2/src/reference.ts" "/Users/test/order2/src/service.ts" --sourcemap --target ES3 --module amd --out out.js

顺序将由命令中传递的文件顺序决定因为您所有的文件都引用reference.ts 除非您传递给编译器的所有内容都是reference.ts。

所以解决方案:要么使用grunt-ts生成引用文件，这样grunt-ts只会要求编译器编译reference.ts

或

有明确的<reference指向您需要包含在当前文件之前的文件的标签。

顺便说一句，最新版本的 grunt-ts 可以为您生成这些引用标签，例如///ts:ref=controller将生成一个引用标签 controller.ts .我需要记录这些转换，但忙于项目。