Typescript Modules Into Single JS file?

Question

Ok, I am complete lost with this. I have just started using Typescript with Grunt JS and need some help.

I have a working Grunt file thats runs my TS and then a uglify process for site ready files, here is the config:

  ts: {
        default: {
            files: {
                '/js/builds/main.js': ['/typescript/main/build.ts'],
                '/js/builds/public.js': ['/typescript/public/build.ts']
            }
        },
        options: {
            target: 'ES5',
            fast: 'never',
            sourceMap: false,
            allowJs: true,
            declaration: false,
            module: 'amd'
        },
    },

    'uglify': {
        options: {
            preserveComments: 'some',
        },
        my_target: {
            files: {
               'src/js/main.js': ['/js/builds/main.js'],
               'src/js/public.js': ['/js/builds/public.js']
            }
        }
    }, 

    watch: {
        'JS': {
            files: [
                   '/js/**/*.js',
                   '/typescript/**/*.ts', 
                   '/typescript/**/**/*.ts'
                ],
            tasks: ['ts', 'uglify'],
            options: {
                spawn: false,
            },
        }
    }

So now I am working on my Typescript files, but I having a lot of issues, I want to use Typescript as a module system but to output into a single file, right now its set to AMD, which needs Require JS of which I dont know.

Right now I don't have the time to learn Typescript and Require JS. So where is what I have got right now,

test.js:

export class testMe {
    constructor() { }

    LogingData() {
       console.log( 'Data being logged...' );
    }
}

Then in my build ts file,

import {testMe} from "./clients/clients"; 

However this needs Require JS or module loading system in order to get it to run? I have tried using commonJs but it seems support for that was removed in Typescript 1.8 (I am using 2.0).

So how do I get my Grunt / Typescript into a single standard ES5 complied code, while using modules for Typescript?

Many thanks

UPDATE

This question & answer, Typescript compile to single file does not give an answer for how to setup grunt to use Typescript into a single file! Plus the answer states that Typescript 1.8+ will fix that issue - But the version I am using does not.

I am using Grunt to compile the TS code into one standard javascript file, without the use of System or Require JS. So I can use that within my HTML code.

The end goal would be to have two single files. To explain I have lots of single .ts files for two sections, one main and the other public - I have not work on the public section, just the main one, so all my tests I been on that section.

So to layout my file/folder path:

    js/
      builds/
          main.js < targer end file
          public.js <- target end file

    typescript
      main/
         settings/
              classA.ts
              somethingelse.ts
         othersection/
               something.ts
      buildMain.ts <- *1

*1 This file then takes all the ts files, via imports (not sure if thats the correct way) and then builds the complete standard single .js file.

I hope that explains my query in more detail.

Thanks

UPDATE 2:

I would just like to add that I am getting a single file, e.g. main.js but that is not a standard Javascript complied file. I don't want to use Require JS or any other external module loading system.

I want to use external .ts files has modules import them into a 'build' file and have that file compile down to a standard self contained javascript file without the need to include require js or anything else.

Hope that clears it up a little more..

Thanks.

Answer 1

I believe you can use --outfile to get everything into one file. The trick is to remove import and export statements and use /// <reference path="path/to/file.ts" /> on the first lines to declare the dependency / ordering relationships. Since it is the import/export statements that produce the calls to CommonJS or Require, omitting them prevents their generation.

Ref: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

For two output files, you'll probably need two tsconfig.json. (I might be incorrect here.)

Answer 2

If you don't bother with .d.ts files you can simply use just --module=commonjs(it is and will be supported) to compile each file into .js and then browserify to concat all modules together.

I'm using CLI scripts instead of grunt but it should be obvious what it does:

$ ./node_modules/.bin/tsc --module commonjs main.ts
$ ./node_modules/.bin/browserify main.js -o bundle.js

Then you can run it like any other JavaScript from browser or CLI using node.

There's also --outFile option for tsc but this is limited only to amd and systemjs modules so I think it's easier to stick to commonjs and browserify.

browserify is an amazing tool. You can generate UMD module with --standalone parameter that works also as global or exclude any external dependencies.

I highly recommend you to read the Official Handbook: https://github.com/substack/browserify-handbook