CODEWITHSUNDEEP
javascriptvisual-studio-2013typescript
Jaime
Jaime

Reputation: 5975

Typescript: compile to more than one .js file in Visual Studio 2013

I have some projects with large code base written in TypeScript. For several reasons, I would like to compile some .ts files of the same project into few .js files. I cannot find a way to do it, but only the 2 well-known project settings: compile each .ts file into one .js file, and compile all .ts files into a single .js file.

As an example, let's say I have A.ts, B.ts, C.ts, D.ts and want to produce ABC.js and CD.js

Is there a way to do this with VS 2013 or any add-in tool?

Upvotes: 1

Views: 636

Answers (3)

Pranay Dutta
Pranay Dutta

Reputation: 2589

here is how i did it

1) create a _references.ts in your project root folder 
2) include references of your ts files in the order you want compilation by the ///<reference syntax
3) go to your typescript project properties -> typescript build option and check the combine javascript output file and mention the file name 
4) done

Upvotes: 0

Jacek Jask&#243;lski
Jacek Jask&#243;lski

Reputation: 68

I struggled with it long time. My solution is to delete all your 

/// <reference path="sometsfile.ts">
form your files (that way all typescript files in project can see each other).

Then enable option to compile each typescript separately. Next use grunt-concat (unfortunately you must provide order of your folders for this to work) and concat each js file from your module file into one.

You can use grunt watch to concat each module if file changes so you don't have to compile all of your project never any more :)

Also Visual Studio Typescript Tools will display any errors in directly in Visual Studio Error List.

My example grunt configuration:

module.exports = function (grunt) {
    grunt.initConfig({
        concat: {
            options: {
                separator: '\n',
            },
            app: {
                src: [
                    'Src/Application/Modules/**/*.js',
                    'Src/Application/Config/*.js',
                    'Src/Application/*.js'
                ],
                dest: 'Scripts/App/App.js'
            },
            ui: {
                src: ['Src/UI/**/*.js'],
                dest: 'Scripts/App/UI.js'
            }
        },

        watch: {
            app: {
                files: ['Src/Application/**/*.js'],
                tasks: ['concat:app'],
                options: {
                    nospawn: true
                }
            },
            ui: {
                files: ['Src/UI/**/*.js'],
                tasks: ['concat:ui'],
                options: {
                    nospawn: true
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

Reffering to basarat response I like to point out that if you use grunt-ts you must provide references in your files and that references will be automatically resolve. That means if your module A have a reference to files in module B that files will be included in your out file A.js

Upvotes: 0

basarat
basarat

Reputation: 276393

Not possible with a visual studio option or an existing add-in. You can do this however externally using something like grunt : https://github.com/TypeStrong/grunt-ts having 2 seperate build targets.

Upvotes: 0

Related Questions