Typescript compile to single file

Typescript compile to single file

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:

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:

Also your TS files should look like this:

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")); >); 

Solution 2

Option 1 — if you are not using modules

If your code contains only regular Typescript, without modules (import/export) you just need to add parameter outfile to your tsconfig.json .

But this option have some limitations.

Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system' 

Option 2 — using a module loader

If you are using modules (import/export), you will need a module loader to run your compiled script in the browser.

When you compile to a single file (using outFile ), Typescript natively supports compiling to amd and system module loaders.

In tsconfig, you need to set module to amd or system :

If you choose AMD, you need to use the require.js runtime. AMD requires an AMD loader, require.js is the most popular option (https://requirejs.org/).

If you choose System, you need to use the SystemJS module loader (https://github.com/systemjs/systemjs).

Option 3 — use a module bundler / build tool

Probably, the best option is to use a module bundler / build tool, like Webpack.

Webpack will compile all your TypeScript files to a single JavaScript bundle.

So, you will use webpack to compile, instead of tsc .

First install webpack, webpack-cli and ts-loader :

npm install --save-dev webpack webpack-cli typescript ts-loader 

If you are using webpack with Typescript, it’s best to use module with commonjs :

Webpack webpack.config.js example:

//webpack.config.js const path = require('path'); module.exports = < mode: "development", devtool: "inline-source-map", entry: < main: "./src/YourEntryFile.ts", >, output: < path: path.resolve(__dirname, './build'), filename: "[name]-bundle.js" // , resolve: < extensions: [".ts", ".tsx", ".js"], >, module: < rules: [ < test: /\.tsx?$/, loader: "ts-loader" >] > >; 

Now, to compile, instead of executing using tsc command, use webpack command.

Lastly, compile everything (under watch mode preferably) with:

Solution 3

The Easiest Way

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

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

Источник

Typescript compile to single file

But ths build.js file is empty and I get all of my files compiled o js files. You can add those files into different folders, and the typescript compiler will then transpile the files according to the tsconfig in the same folder, or one of its parent folders.

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 

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 from "../../bla/blas"; export default class bar implements someThing

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:

Also your TS files should look like this:

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")); >); 

Option 1 — if you are not using modules

If your code contains only regular Typescript, without modules (import/export) you just need to add parameter outfile to your tsconfig.json .

But this option have some limitations.

Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system' 

Option 2 — using a module loader

If you are using modules (import/export), you will need a module loader to run your compiled script in the browser.

When you compile to a single file (using outFile ), Typescript natively supports compiling to amd and system module loaders.

In tsconfig, you need to set module to amd or system :

If you choose AMD, you need to use the require.js runtime. AMD requires an AMD loader, require.js is the most popular option (https://requirejs.org/).

If you choose System, you need to use the SystemJS module loader (https://github.com/systemjs/systemjs).

Option 3 — use a module bundler / build tool

Probably, the best option is to use a module bundler / build tool, like Webpack.

Webpack will compile all your TypeScript files to a single JavaScript bundle.

So, you will use webpack to compile, instead of tsc .

First install webpack, webpack-cli and ts-loader :

npm install --save-dev webpack webpack-cli typescript ts-loader 

If you are using webpack with typescript, it’s best to use module with commonjs :

Webpack webpack.config.js example:

//webpack.config.js const path = require('path'); module.exports = < mode: "development", devtool: "inline-source-map", entry: < main: "./src/YourEntryFile.ts", >, output: < path: path.resolve(__dirname, './build'), filename: "[name]-bundle.js" // , resolve: < extensions: [".ts", ".tsx", ".js"], >, module: < rules: [ < test: /\.tsx?$/, loader: "ts-loader" >] > >; 

Now, to compile, instead of executing using tsc command, use webpack command.

Lastly, compile everything (under watch mode preferably) with:

The Easiest Way

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

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

Typescript — Compile multiple files internal module into, To compile to a single file use the —out FILE command line argument. This will combine all internal modules into a single file. To compile all external modules as AMD use -m amd. In both cases you’ll also want -d because that will generate a declaration file to go with it to reference from other projects. …

TypeScript Compile Order to Single File

I’m compiling my TypeScript project into a single JS file, at the moment by specifying an outFile in the compiler options. In my project each class is defined in a different file.

The problem is that classes that depend on each other are not concatenated in the output JS in the right order.

For example, if I have class A that extends class B, it’d mean class B would have to be compiled before class A.

class A extends B < >//error - can't find B class B

class B < >class A extends B < >//works as expected 

The problem is the file order in TypeScript compile is not defined according to class dependencies, resulting in many instances of (1).

It can be solved by manually defining the compile order with many lines of:

however it is not ideal and can quickly become a headache in large projects.

The other option from what I read is to use external modules and be able to require/import relevant classes/files.

It sounds good, but it seems to only take care of ASYNC loading during runtime of the required files after each ts file has been compiled into its own js file.

What I need is defining the right compile order according to class dependencies during compile time from ts to js.

I googled «typescript compile order» and read thoroughly the first 10 results — meaning following references to turoials, documentations, videos, etc.

It seems people have been experiencing the same problem but their questions have never been answered to satisfaction.

From what I understand it should be possible to do using the CommonJS external module, but all I can understand from the answers is a general sense of what should be happening rather than a simple and straightforward answer of how to actually do it.

If you know the answer, let’s solve this issue once and for all 🙂

It is not an issue with TypeScript, but with ECMAScript: classes are not hoisted .

See the book of Dr. Axel Rauschmayer:

Function declarations are hoisted: When entering a scope, the functions that are declared in it are immediately available – independently of where the declarations happen. That means that you can call a function that is declared later:

foo(); // works, because `foo` is hoisted function foo() <> 

In contrast, class declarations are not hoisted. Therefore, a class only > exists after execution reached its definition and it was evaluated. Accessing it beforehand leads to a ReferenceError:

new Foo(); // ReferenceError class Foo <> 

You have to take care to the order.

… or to use a bundler (Webpack) or a loader (SystemJS) with ES6 modules.

It is safe to say that there’s no one way to do this. But I advise you to aim for the safest and most sophisticated build/bundling setup you can get. Depending on the scale of your project, consider the following points.

You can manually define a sort order for your output. Will it scale? No. Sorting hundreds of files and resolving conditional or circular dependencies can be a real pain, and erroneous by the way.

You can rely on reference tags and the compiler’s ordering when using the out option. I think of this as the worst solution to aim for. At a certain project size and assuming there is a reasonable amount of non-perfect software design in it, you might end up with non-deterministic output ordering and zero warning or protection against dependency problems.

That is why I advise the following:

• Use import/export to enforce your dependencies, you’ll have compiled modules, and you’ll need a loader/bundler, yes
• Avoid circular dependencies, use the dependency graph or tools like madge to find them
• Use a loader and a pleasent workflow to create your dist files (we use gulp/browserify/tsify/concat/. ) — the core of it is about 20 lines of code

Is your project going to be tiny? 20 files? 50? Choose any. Is your project large enough? Modules it is. Enjoy several benefits like slicker node modules bundling or less need for name spacing .

How to compile multiple Typescript files into a single file, Explanation: tsc: It stands for TypeScript compiler which is used to invoke the compiler in order to compile the TypeScript files. –out: It is a CLI (Command Line Interface) command which concatenates the TypeScript files and emits the output to a single TypeScript file. outputFile.ts: The TypeScript file …

Compiling typescript files into one file, but some of them as single files

I have a project with lots of Typescript files, which I want to compile into one file. I can set that up in Visual Studio, no problem.

But then I also have some files that should be compiled in their own file.

Basically, I have a structure like this:

Everything in js/ should be compiled into one file, everything in tests/ should be each an individual file. I could now compile into individual files, and use a bundle with Webessentials, but this is not so good to debug.

Is there a way to tell the typescript compiler to have different compile settings for different folders? I’d also really like to still have it compile on saving a file.

No, you would have to run the compiler with different arguments for each folder. Since you’re using Visual Studio, you could do that by creating a separate project that includes the files under the /tests folder.

Update on this: @curpa answer back then was the correct one, but since then, some updates have been added to Typescript.

Since, I think Typescript 1.8 (not quite sure?), you can use tsconfig files to configure typescript configuration. You can add those files into different folders, and the typescript compiler will then transpile the files according to the tsconfig in the same folder, or one of its parent folders.

With this, you can then configure your project to transpile with different settings in different folders.

In my example, with folders js/ and tests/, this might look like this: tsconfig.json in js/

Typescript: compile to more than one .js file in Visual, 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 /// typescript build option and check the combine javascript output file and mention the file name …

Источник