Getting Started

[seant-ca]

the TsBundler wiki has more detailed instructions so I followed along. I used the node script example provided in the wiki and I see output in the console.

There was output of some typescript errors based on some typescript definition files in the node_modules/@types but I assume these are ignorable because at the end it is says "Build completed with errors"...I am assuming this means the build was still successful?

I have configured the bundles property to have my entry file and output directory but the output directory isn't even being created, so I tried creating it in advance but I don't get any emitted javascript file.

I do a log of result.bundleOutput and it says undefined, does that mean there is no bundle outputted?

Please advise and thanks in advance for your support.

[ToddThomson]

@seansat please take a look at the tsbundler Typescrpt Greeter sample.

[ToddThomson]

@seansat Typescript allows emitted output even in the presence of errors.

sBundler requires a ts.program ( or transpilation ) context to analyze the dependencies of the bundle entry or input file(s). The bundling process produces a single file/module. This file is then sent to ts2js for compilation ( and minification if configured ).

Again, I'll get to the documentation as I progress towards the 1.0.0 release.

[seant-ca]

Question: Does TsBundler ONLY read the "bundles" property of the tsconfig file or does it also read the other compiler option as well? If yes, do these need to be set to particular values in order to work?

My assumption/understanding is that it only reads "bundles" and that's it?

[ToddThomson]

@seansat TsBundler parses the "bundles" property of the Typescript project config file. It uses this information to create a monolithic single typescript module. TsBundler also reads the overall config file to get the root files and compilation options. Since the Typescript emitted output is controlled through the use of the compiler options, TsBundler must parse the entire project as defined in the config file. Once the overall project is parsed and the AST generated, the bundler can then analyze the dependency of a given input file.

Previously with TsProject, all the project files were streamed ( all the emitted compiler output ) through the gulp build pipeline as TsProject was a gulp vinyl adaptor. TsBundler now only streams or writes to memory the emitted bundle files.

[seant-ca]

Thanks for all the information, I am starting to get a clearer picture.

Can you provide a technical overview of your process of creating a "bundle". You basically concatenate all the code from all the files in the project into one file?

Is there a mechanism to resolve possible "class name" conflicts?

[ToddThomson]

With TsProject, there were conventions that you needed to follow to avoid global name conflicts within the monolithic bundle. If bundle compilation resulted in duplicate identifier errors then you had to manually address the conflicts. With TsBundler I am addressing this issue by generating "internal" modules through the use of ambient modules and bundler annotations. This is in fact the last task that needs to be implemented before the 1.0.0 release.

[ToddThomson]

A TsBundler bundle is a single monolithic typescript module ( file ). A bundle is the result of processing a Typescript project as defined in the project config json file ( really only parsing is required of the input project to build the resultant project AST ). TsBundler uses the Typescript compiler options and root files to create a compilation context ( AST) which is analyzed to determine the dependency tree of a given input file. The bundle input file is configured in the "bundles" property of the Typescript project config json file. Since ES6 imports and exports are determined through static analysis only the Typescript project source files must all be external modules for the process to work properly.

[seant-ca]

Can you explain how "TsBundler.outputToDisk = true" works?

[seant-ca]

Okay, I think I figured it out, it writes the file to disk, however it does not use the "outDir" defined in the "bundles" config property, it uses the "outDir" defined in the overall tsconfig "compilerOptions" property.

[seant-ca]

Does the Bundler pay attention to the order in which classes are outputted into the bundle file based on dependency requirements? I think I'm getting a dependency based error after running my own custom bundle file.

[ToddThomson]

@seansat Yes, that is the whole idea. Since ES6 import and exports are all known through static analysis ( they are all top level ), it is quite simple to build up a dependency tree from an input source file. TsBundler parses the project source files to be able to traverse the resultant AST to look for "modules". The bundle is built "bottom up" according to the dependency order.

[ToddThomson]

@seansat Yes, the Typescript compiler options includes an -outDir. This provides a mechanism for bundling/concatenating modules with a specified loader format.

Remember that the "bundles" property within the Typescript project config json file is what drives the generation of bundles. The standard config options drive the compilation process.

[ToddThomson]

@seansat Keep in mind that TsBundler, TsMinifier and Ts2Js are all tools that you will likely use in your project build pipeline. You really just need to "use" their output. They just provide a transform of the important things: your source files.

The BundlerOption outputToDisk controls whether you want the output from the bundling process written to disk as well as memory based files.

[ToddThomson]

@seansat It appears that I have introduced a bug in dependency ordering. I'll update the npm package soon. I've created issue #6 to track.