使用 Gulp 设置 TypeScript / Angular

Question

非常熟悉 Gulp 和 Angular，TypeScript 新手。我一直在使用 Browserify 来捆绑我的 JavaScript 并管理依赖树，但据我所知，我不想将 Browserify 与 TypeScript 一起使用。

在我的主/入口点文件中有这样的东西之前。

require('angular');
require('angular-ui-router');
require('./myModules/testModule')
require('./myControllers/mainController')

angular.module('exampleApp', ['mainController','testModule'])

    .config(...);

}());

这将确保所有必要的文件都以适当的顺序捆绑到最终的.js 应用程序中。

但是使用 TypeScript（使用 gulp-typescript）来引用其他文件进行构建的方式似乎是：

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

但这仅适用于其他 TypeScript 文件。我将如何加载我的 angular 和其他非 TS 部门？

作为参考，我的构建看起来像：

var jsStream = function() {
    return gulp.src(PUBLIC + '/js/**/*.ts')
        .pipe(typescript({
            declarationFiles: false,
            sortOutput: true,
            out: 'app.js'
        }))
        .pipe( streamify( rev() ) )
        .pipe( gulp.dest( PATHS.dest.js ) );
};

Answer 1

TypeScript 引用（如 /// <reference path="myModule.ts"/>）用于转译为 JS、解析依赖项以及文本编辑器或 IDE 中的 Intellisense。如果您希望在 TypeScript 中引用不是用 TypeScript 编写的现有库，只需查看 GitHub 上的 tsd 和 DefinitelyTyped project。

您仍然可以像以前一样使用 Browserify 进行捆绑。唯一的区别是您需要首先通过tsc 或您提到的gulp-typescript 将您的TypeScript 转换为JavaScript。将 TS 作为 JS 后，将 if 与其他文件（例如 Angular 和 Browserify）捆绑在一起。我不知道这个插件是否好用，但似乎有一个名为 tsify 的 TypeScript Browserify 插件。或许也可以看看。