Экспорт модулей TypeScript для браузера

Question

Недавно я преобразовал библиотеку холста, которую я написал в машинописный текст. Я разбил код на классы, и все они присоединяются к модулю cnvs, но мне сложно скомпилировать их до одного файла.

В идеале я хотел бы, чтобы мои файлы запускались через браузер, но на данный момент я просто хочу, чтобы он работал.

Один файл может выглядеть

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, так что когда он компилируется, у меня есть один файл со всей базой кода, прикрепленный к t он окно ИЛИ несколько файлов, которые затем могут быть скомпилированы с помощью браузера в один файл.

Полный код находится на http://github.com/allouis/cnvs

Благодарности

Answer 1

Вы можете просто скомпилировать весь проект с помощью использования --out out.js машинописи компилятора аргумент. Это объединит все ваши файлы для вас и создаст out.js.

Одна вещь, о которой нужно знать, это порядок кода в аргументах. Проверьте https://github.com/basarat/grunt-ts#javascript-generation-and-ordering

Answer 2

заказ из typeify:

https://github.com/bodil/typeify

Пожалуйста, обратите внимание, что работать на Node.js.

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