打字稿：编译文件而不镜像目录层次结构

Question

我正在使用 VS Code 使用 TypeScript (JS) 制作 HTML5 游戏。项目越来越大，我想将输出存储在不同的目录中。 问题是，每当我编译所有内容时，它都会反映原始目录层次结构。例如：

-dir1
--dir2
--dir3
---dir4

输出：

-dir1
--dir2
--dir3
---dir4

（相同）

我想要：

-dir1
*.js 

我已经尝试过 Grunt/Gulp/VSCode 自己的 TaskRunner，但没有任何效果，而且 "keepDirectoryHierarchy" 似乎被贬低了..

Answer 1

我认为您需要给 Gulp 或其他任务运行程序看一下。您需要几个步骤才能实现您的目标。

• 编译打字稿
• 连接文件
• 清理多余的文件

我使用 CoffeeScript 的类似系统，效果很好。

Answer 2

Gulp 应该可以。您可以使用 the flatten plugin:

我会使用 gulp-flatten:

var flatten = require('gulp-flatten');
gulp.task('compile', function() {
  gulp.src('src/**/*.ts')
   .pipe(tsc())                    //compile them
   .pipe(flatten())                //change their relative path to point to one dir
   .pipe(gulp.dest('build'));      //write them in destination
});

Answer 3

我已经弄明白了。我做了一个自定义的 Grunt 任务，虽然不是最优的，但可以完成任务。

module.exports = function(grunt) {
    grunt.loadNpmTasks("grunt-typescript");
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.loadNpmTasks('grunt-copy');
    grunt.loadNpmTasks('grunt-contrib-clean');

    grunt.initConfig({
        typescript: {
            base: {
                src: ['./client/**/*.ts'],
                dest: './temp',
                options: {
                    'module': 'commonjs',
                    target: 'es5',
                    sourceMap: true
                }
            }
        },
        copy: {
            main: {
                files: [
                    {
                        src: ['./temp/**/*.js', './temp/**/*.js.map'],
                        dest: './build/',
                        flatten: true,
                        expand: true
                    }
                ]
            }
        },
        clean: [
            './temp'
        ],
        watch: {
            scripts: {
                files: ['./client/**/*.ts'],
                tasks: ['typescript', 'copy', 'clean']
            }
        }
  });

  grunt.registerTask("default", ['typescript', 'copy', 'clean', 'watch']);
};

Answer 4

VS Code支持两种typescript编译方式：

1. 原生编译使用tsconfig
2. 使用 JavaScript Task Runner 例如 Gulp 或 Grunt

原生编译使用tsconfig

1. 在根目录中创建文件 tsconfig.json

2. 将下一个配置放入其中

    {
      "version": "1.6.0-beta",
      "compilerOptions": {
         "target": "es5",
         "declaration": true,
         "noImplicitAny": false,
         "removeComments": true,
         "noLib": false,
         "emitDecoratorMetadata": true,
         "sourceMap": true,
         "listFiles": true,
         "outDir": "",
         "out": "./Compiled/mycompiled.js", // here specify your output file( it would be contain all your compiled ts file in one) 
         "experimentalDecorators": true
      },
      "files": [ // file list (optional)
        "somefile.ts"
      ]
   }
   

3. 配置 VS Code 任务运行器

使用 JavaScript Task Runner 例如 Gulp 或 Grunt

当前示例显示了您应如何修改 gulpfile.js 以使用 gulp-typescript

编译您的项目

gulp.task('build', function () {
    var tsResult = gulp.src('src/**/*.ts') // here specify your file location or folders
                     .pipe(ts({ // gulp-typescript configuration
                               noImplicitAny: true,
                               out: 'output.js'// here specify your output file( it would be contain all your compiled ts file in one) 
                              }));

    return 
        tsResult.js
            .pipe(gulp.dest('./')); // here you can specify your output directory too
});

问题解决方案

对于您的情况，您可以选择两种解决方案。注意代码注释，任意指定out目录和编译后的js文件名。

祝你好运！

资源

1. Gulp Typescript NPM.
2. Using TypeScript in Visual Studio Code (MSDN Blog).
3. Typescript tsconfig.json specification
4. Using Task Runner in VS Code