Question

我有一个ts（angularjs）项目，并使用参考文件来指定依赖项的顺序。但是，它没有正确排序。在生成的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，但我现在不想使用它。

reference.ts

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

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

names.ts

//names section

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

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

service.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) {
            }
        }
    }
}

module.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

OR

在当前文件之前，将明确的<reference标记指向您所需的文件。

BTW grunt-ts最新版本可以为您生成这些参考标签，例如： ///ts:ref=controller会为controller.ts生成参考代码。我需要记录这些转换，但我很忙于项目。

Answer 2

一旦我发现生成顺序是问题，

Typescript的文档对我解决这个问题很有用。 Typescript vs. Javascript Generation

当通过引用结合引用文件指定输出文件时，grunt-ts使用生成的引用文件在生成的JavaScript中对代码进行排序。

使用reference.ts指定构建的少数文件的顺序   非常关心并留下其余部分由grunt-ts维护。

E.g。在以下情况下生成的JavaScript用于   someBaseClass.ts保证在顶部，并生成   main.ts的JavaScript保证位于单一的底部   合并的js文件。

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

// Put comments here and they are preserved

//grunt-start
/// <reference path="autoreference.ts" />
/// <reference path="someOtherFile.ts" />
//grunt-end

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

grunt-start和grunt-end之间的所有内容都由grunt-ts生成和维护。如果找不到grunt-start部分，则创建它。如果reference.ts最初不存在，那么它也会被创建。

虽然有时候所有这些都像是试图遵守柯克船长在飞行中弥补的规则Fizbin。

typescript：生成文件中的连接顺序

2 个答案: