Typescript compile to single file

I'm using TS 1.7 and I'm trying to compile my project to one big file that I will be able to include in my html file.

My project structure looks like this:

-build // Build directory
-src // source root
--main.ts // my "Main" file that uses the imports my outer files
--subDirectories with more ts files.
-package.json
-tsconfig.json

my tsconfig file is:

 {
  "compilerOptions": {
    "module":"amd",
    "target": "ES5",
    "removeComments": true,
    "preserveConstEnums": true,
    "outDir": "./build",
    "outFile":"./build/build.js",
    "sourceRoot": "./src/",
    "rootDir": "./src/",
    "sourceMap": true
  }
}

When I build my project I expect the build.js file to be one big file compiled from my source. But ths build.js file is empty and I get all of my files compiled o js files.

Each of my TS files look a bit like this

import {blabla} from "../../bla/blas";

export default class bar implements someThing {
    private variable : string;
}

What am I doing wrong ?

Unfortunately, --module and --outFile is a trap combination for many users that is generally not useful. If you'd like to bundle your application, I'd suggest you remove outFile and use a tool like Browserify or Webpack.

actually in #5090 we've added support for bunding amd\system modules into one file. Can you give a try to typescript@next on npm?

Vladimir Matveev (@vladima)

Thanks for the correction Vladimir Matveev (@vladima), I didn't realize.

Please consider adding native bundling support to typescript.

The workaround is a huge pain to setup and maintain: Compile all typescript modules to ES6, then transpile to ES5 with Babel using the correct babelrc, presets, etc; then feed the ES5 output to webpack (webpack 1.x doesn't support ES6)

Alexandre Galays (@AlexGalays)

Compile all typescript modules to ES6, then transpile to ES5 with Babel using the correct babelrc, presets, etc; then feed the ES5 output to webpack (webpack 1.x doesn't support ES6)

Alexandre Galays (@AlexGalays) can you elaborate on why you need the babel step there? i understand the webpack step.

Mohamed Hegazy (@mhegazy)

Mohamed Hegazy (@mhegazy) Good question... I had a few modules that required commonJS interop and that used to work with babel 5; now I moved to babel 6 and updated these modules anyway, so I'm going to fork my setup, remove the babel step and keep you updated.

Edit: It indeed works just fine without babel... and it's 3 times faster now, a welcomed change. Cheers.

I'm a bit confused. Should not compiling multiple files in amd mode with out setting specified result in a file with a single define(...) statement?

I'm using gulp-typescript and have approximately following:

gulp.task('compile', function() {
    var tsProject = $.typescript.createProject('tsconfig.json', {
        removeComments: true,
        module: 'amd',
        out: compiled.js`
    });

    var tsResult = gulp.src(['src/client/feature1/**/*.ts', 'src/types/**/*.ts'])
        .pipe($.typescript(tsProject));

    return tsResult.js
        .pipe(gulp.dest('build/client/feature1.js'));
});

Given that folder feature1 had two files (a.ts, and b.ts), the result is:

define("client/feature1/a", ["require", "exports"], function (require, exports) {
    "use strict";
    // feature one/a code...
});
define("client/feature1/b", ["require", "exports"], function (require, exports) {
    "use strict";
    // feature one/b code...
});

... which to my understanding is not valid anyway. Shouldn't output be something like this:

define(["require", "exports"], function (require, exports) {
    "use strict";
    // feature one/a code...
    // feature one/b code...
});

... which to my understanding is not valid anyway. Shouldn't output be something like this:

why is not it valid?

docs for requirejs state:

There should only be one module definition per file on disk.

Please see http://requirejs.org/docs/api.html#modulename

thanks for the right pointer.

After searching for days on how to do this, and being directed here, I also support this motion. A single export file would be great, I don't mind managing my other build steps with bash.

+1

I can't be the only thinking wtf, but then again this is Microsoft, so not all that shocked

At the moment I have a happy truce by using webpack + https://github.com/s-panferov/awesome-typescript-loader

That loader uses tsc bare metal commands.

Navigation Menu

Repository navigation

Typescript compile to single file #6257

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Typescript compile to single file #6257

Description

Activity

DanielRosenwasser commented on Dec 27, 2015

vladima commented on Dec 27, 2015

DanielRosenwasser commented on Dec 27, 2015

AlexGalays commented on Jan 25, 2016

mhegazy commented on Jan 25, 2016

AlexGalays commented on Jan 26, 2016

DmitryEfimenko commented on Mar 8, 2016

mhegazy commented on Mar 8, 2016

DmitryEfimenko commented on Mar 8, 2016

mhegazy commented on Mar 8, 2016

DmitryEfimenko commented on Mar 8, 2016

quantuminformation commented on Dec 20, 2016

rochapablo commented on Jan 5, 2017

cwbeck commented on Jul 28, 2017

quantuminformation commented on Jul 28, 2017

quantuminformation commented on Jul 28, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions