CODEWITHSUNDEEP
javascripttypescriptbrowserify
allouis
allouis

Reputation: 19

exporting TypeScript modules for browserify

I've recently converted a canvas library I wrote into typescript. I've broken the code down into classes and they all attach themselves to a cnvs module, but i'm have a hard time compiling these down to one file.

Ideally I would like to have my files run through browserify, but at the moment i just want to get it working.

One file may look like

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

and then another would be

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

module cnvs {

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

}

Originally I was using import Shape = require('./Shape') (with some variants, like including extension and not including leading './')

In my cnvs.ts file I would to export the cnvs module, so that when it compiles I have a single file with the entire code base in, attaching to the window OR multiple files that could then be compiled with browserify into a single file.

The full code is at http://github.com/allouis/cnvs

Thanks

Upvotes: 1

Views: 2502

Answers (3)

malix
malix

Reputation: 3572

I use browserify & ```typescriptifier``'...

So you would do:

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

...

require("Shape.ts");

This is some of my 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']);
};

See https://www.npmjs.org/package/typescriptifier

Upvotes: 0

user2363245
user2363245

Reputation: 1735

Checkout out typeify:

https://github.com/bodil/typeify

Please note it run on node.js.

Upvotes: 1

basarat
basarat

Reputation: 275947

You can simply compile the whole project using using --out out.js typescript compiler argument. This will merge all your files for you and generate an out.js.

One thing to be aware of is that the order of code in the arguments. Check out https://github.com/basarat/grunt-ts#javascript-generation-and-ordering

Upvotes: 0

Related Questions