導出用於瀏覽器的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