Typescript compile to single file

typescript compile to single file commonjs
webpack typescript
typescript files
tsc compile single file
only 'amd' and 'system' modules are supported alongside --outfile.
typescript compile to amd
tsconfig baseurl
typescript compile for browser

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 ?

This will be implemented in TypeSript 1.8. With that version the outFile option works when module is amd or system.

At this time the feature is available in the development version of Typescript. To install that run:

$ npm install -g typescript@next

For previous versions even if it's not obvious the module and the outFile options can not work together.

You can check this issue for more details.


If you want to output a single file with versions lower than 1.8 you can not use the module option in tsconfig.json. Instead you have to make namespaces using the module keyword.

Your tsconfig.json file should look like this:

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

Also your TS files should look like this:

module SomeModule {
  export class RaceTrack {
    constructor(private host: Element) {
      host.appendChild(document.createElement("canvas"));
    }
  }
}

And instead of using the import statement you'll have to refer to the imports by namespace.

window.addEventListener("load", (ev: Event) => {
  var racetrack = new SomeModule.RaceTrack(document.getElementById("content"));
});

How to Compile Typescript into a Single File with AMD Modules with , I've been tinkering with TypeScript lately and was trying to setup my project to compile all of my modules into a single file, which would then be  To generate source maps for your TypeScript files, compile with the --sourcemap option or set the sourceMap property in the tsconfig.json file to true. In-lined source maps (a source map where the content is stored as a data URL instead of a separate file) are also supported, although in-lined source is not yet supported.

Using more recent version of Typescript I was able to compile all ts files to a single big Javascript file using the configuration below:

tsconfig.json:

{
    "compilerOptions": {
        "lib": ["es5", "es6", "dom"],
        "rootDir": "./src/",
        "outFile": "./build/build.js"
    }
}

Typescript compile to single file · Issue #6257 · microsoft/TypeScript , 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  I've been tinkering with TypeScript lately and was trying to setup my project to compile all of my modules into a single file, which would then be used in an HTML page. Maybe this is obvious to the more experienced TypeScript developer, but I had made a number of false assumptions while trying to get this to work.

You can achieve this with a custom tool called ncc, built and maintained by ZEIT. Here's how they're using it in create-next-app:

ncc build ./index.ts -w -o dist/

Install it with yarn:

yarn add @zeit/ncc

Or npm:

npm install @zeit/ncc

Compiler Options · TypeScript, Running tsc locally will compile the closest project defined by a tsconfig.json --​inlineSourceMap, boolean, false, Emit a single file with source maps instead of  One Response to “TypeScript Compiling into Single JavaScript File”. Regarding compiling to single file, the default with the Visual Studio plugin is to compile each file into a separate .js file, which it does by specifying all the files in the -out parameter.

Compile TypeScript Project, Learn about compiling TypeScript project and also config file tsconfig.json. which includes two module files, one namespace file, tsconfig.json and an html 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

Configuring TypeScript compiler, TypeScript files are compiled into JavaScript using TypeScript compiler. concatenate all files into one file if we specify outFile compiler option. You can also concatinate all the specified files into a single JavaScript file. If you want the single JavaScript file to be called output.js you would type: tsc --out output.js file1.ts file2.ts. Note that only global scripts support concatenation, modules don't.

TypeScript - compile all ts files to one js - Dirask, 0 contributions. 9 points. In TypeScript it is possible to compile all *.ts files to one *.js file in following way. Download all source code from one place here. The UMD file would serve our needs as commonjs if only there currently isn’t a way to create typing definition in a single bundled file (that mirrors the bundled UMD module). Also since TypeScript 1.8 the compiler has and option (—outFile) to emit a single bundled file after traversing the imports.

Comments
  • The issue that you pointed out seemed to be resolved, also github.com/Microsoft/TypeScript/wiki/Compiler-Options suggests that the --outFile flag as to be used with the --module flag.
  • indeed, but it does not seem to be working. :( Maybe make an issue out of it on github?
  • btw, the resolutions of the issues on github do not seem to point to any actual changes to the code base, they always close with this being the default behaviour.
  • I edited the answer to include the @next part too, just so it's clearer. :)
  • Is there a better way to do this with TypeScript 3.x?
  • Your solution does not work. I get "Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system'."
  • @AlkisMavridis same for me. Did you find a solution?