导出用于浏览器的TypeScript模块

Question

我最近将我编写的画布库转换为打字稿。 我已经将代码分解为类，它们都将自己附加到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

签出typeify ：

https://github.com/bodil/typeify

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

Answer 2

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

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

Answer 3

我使用browserify和```typescriptifier``'...

所以你会做：

/// <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