Typescript：在 Visual Studio 2013 中编译为多个 .js 文件答案

【问题标题】：Typescript: compile to more than one .js file in Visual Studio 2013Typescript：在 Visual Studio 2013 中编译为多个 .js 文件
【发布时间】：2015-06-11 15:29:57
【问题描述】：

我有一些用 TypeScript 编写的大型代码库项目。由于几个原因，我想将同一个项目的一些 .ts 文件编译成几个 .js 文件。我找不到办法，只有两个众所周知的项目设置：将每个 .ts 文件编译成一个 .js 文件，并将所有 .ts 文件编译成一个 .js 文件。

举个例子，假设我有 A.ts、B.ts、C.ts、D.ts 并想生产 ABC.js 和 CD.js

有没有办法使用 VS 2013 或任何插件工具来做到这一点？

【问题讨论】：

+1。我面临同样的问题。这个问题有新的更新吗？我不想为简单的事情安装和使用外部工具，比如我有 A.ts、B.ts、C.ts、D.ts 并想要生成 ABC.js 和 CD.js

标签： javascript visual-studio-2013 typescript

【解决方案1】：

不适用于 Visual Studio 选项或现有加载项。但是，您可以在外部使用 grunt 之类的东西来执行此操作：https://github.com/TypeStrong/grunt-ts 有 2 个单独的构建目标。

【讨论】：

【解决方案2】：

我挣扎了很长时间。我的解决方案是删除你所有的

///

形成您的文件（这样项目中的所有打字稿文件都可以互相看到）。

然后启用选项以分别编译每个打字稿。接下来使用 grunt-concat（不幸的是，您必须提供文件夹的顺序才能使其工作）并将模块文件中的每个 js 文件合并为一个。

如果文件更改，您可以使用 grunt watch 连接每个模块，这样您就不必再编译所有项目了:)

Visual Studio Typescript Tools 也将直接在 Visual Studio 错误列表中显示任何错误。

我的示例 grunt 配置：

module.exports = function (grunt) {
    grunt.initConfig({
        concat: {
            options: {
                separator: '\n',
            },
            app: {
                src: [
                    'Src/Application/Modules/**/*.js',
                    'Src/Application/Config/*.js',
                    'Src/Application/*.js'
                ],
                dest: 'Scripts/App/App.js'
            },
            ui: {
                src: ['Src/UI/**/*.js'],
                dest: 'Scripts/App/UI.js'
            }
        },

        watch: {
            app: {
                files: ['Src/Application/**/*.js'],
                tasks: ['concat:app'],
                options: {
                    nospawn: true
                }
            },
            ui: {
                files: ['Src/UI/**/*.js'],
                tasks: ['concat:ui'],
                options: {
                    nospawn: true
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

关于 basarat 的回复我想指出，如果您使用 grunt-ts，您必须在文件中提供引用，并且引用将自动解析。这意味着如果您的模块 A 引用了模块 B 中的文件，则该文件将包含在您的输出文件 A.js 中

【讨论】：

【解决方案3】：

我是这样做的

1) create a _references.ts in your project root folder 
2) include references of your ts files in the order you want compilation by the ///<reference syntax
3) go to your typescript project properties -> typescript build option and check the combine javascript output file and mention the file name 
4) done

【讨论】：