Question

我最近将我写的一个画布库转换成了typescript。我已经将代码分解为类并且它们都将自己附加到cnvs模块，但是我很难将这些代码编译为一个文件。

理想情况下，我想让我的文件通过browserify运行，但目前我只想让它运行起来。

一个文件可能看起来像

module cnvs {
  export class Shape {
    // stuff here
  }
}

然后另一个是

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

module cnvs {

  export class Rect extends Shape {
    // rectangle stuff here
  }

}

最初我使用import Shape = require('./Shape')（有一些变体，比如包括扩展名，不包括前导'./'）

在我的cnvs.ts文件中，我将导出cnvs模块，以便在编译时我有一个包含整个代码库的文件，附加到窗口或多个文件，然后可以使用browserify编译成一个单个文件。

完整代码位于http://github.com/allouis/cnvs

由于

Answer 1

结帐输入：

https://github.com/bodil/typeify

请注意它在node.js上运行。

Answer 2

您可以使用--out out.js typescript编译器参数简单地编译整个项目。这将为您合并所有文件并生成out.js.

要注意的一件事是参数中的代码顺序。查看https://github.com/basarat/grunt-ts#javascript-generation-and-ordering

Answer 3

我使用browserify＆amp; ```typescriptifier``＆＃39; ...

所以你会这样做：

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

...

require("Shape.ts");

这是我的一些gruntfile.js

module.exports = function (grunt) {

  grunt.initConfig({
    clean: {
      dev: ['dest/**/*.*']
    },

    browserify: {
      dev: {
        src: ['src/root.ts'],
        dest: 'dest/App.js',
        options: {
          external: ['angular'],
          transform: ['typescriptifier'],
          debug: true,
          bundleOptions: { debug: true },
          browserifyOptions: { debug: true }
        }
      }
    },
    express: {
      dev: {
        options: {
          bases: ['src'],
          port: 5000,
          hostname: '0.0.0.0',
          livereload: false
        }
      }
    },
    watch: {
      ts: {
        files: ['src/**/*.ts', '!src/**/*.d.ts'],
        tasks: ['dest'],
        options: {
          livereload: true,
          debug: false,
          debounceDelay: 100
        }
      },
      html: {
        files: ['src/**/*.css', 'src/**/*.html'],
        options: {
          livereload: true,
          debug: false,
          debounceDelay: 100,
          spawn: false
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-express');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browserify');
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.registerTask('dev', ['rebuild', 'express:dev', 'watch' ]);
  grunt.registerTask('build', ['browserify:dev']);
  grunt.registerTask('rebuild', ['clean:dev', 'build']);
};

请参阅 https://www.npmjs.org/package/typescriptifier

导出用于browserify的TypeScript模块

3 个答案: