grunt-ts-concat
Bundle your typescript files with Grunt into a single file that when compiled with typescript compiler results in a single module that consumers of your library can import from.
Getting Started
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-ts-concat
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt;
The "ts_concat" task
Overview
In your project's Gruntfile, add a section named ts_concat
to the data object passed into grunt.initConfig()
.
grunt;
Options
options.bundles
Type: Object
Default value: null
- If you are bundling a set of typescript files that import from a different set of files that have already been bundled, you can specify that using this property.
- This is not required, but sometimes when you may wanna use this to give better modularity to your code.
key
is the path to bundle andvalue
is anarray
of file paths that should be replaced with this bundle during concatenation.- Paths inside this
array
can have glob patterns. - For examples refer to
Gruntfile.js
.
Usage Examples
grunt;
Why would you use this?
For example you have following files.
//letters-validator.ts; implements SomeValidator lettersRegexp: RegExp = /^[A-Za-z]+$/; { return thislettersRegexp; }
//zip-code-validator.ts; implements SomeValidator numberRegexp: RegExp = /^[0-9]+$/; { return slength === 5 && thisnumberRegexp; }
Now let's say that you compile and bundle these files into a single file called main.js
with typescript
compiler, the result is something like this.
//main.js System; System;
and the main.d.ts
file is (generated if compiler option --declaration
is passed as true
) [Typescript Documentation]
//main.d.tsdeclare module "some-validator" declare module "letters-only-validator" ; implements SomeValidator lettersRegexp: RegExp; : boolean; declare module "zip-code-validator" ; implements SomeValidator numberRegexp: RegExp; : boolean;
Which means that now if someone is using your library, they have to write 2 import statements for importing these classes.
This also means that the consumer of your library should be aware of the complete folder structure of your library to import from different modules because when
typescript
compiler bundles files, it gives the file path as module name.
Here comes ts_concat
, when you use this you can generate a bundle like below
//main.ts; implements SomeValidator lettersRegexp: RegExp = /^[A-Za-z]+$/; { return thislettersRegexp; } implements SomeValidator numberRegexp: RegExp = /^[0-9]+$/; { return slength === 5 && thisnumberRegexp; }
and when you compile this with typescript
compiler, the result is
//main.jsSystem;
and main.d.ts
file is
//main.d.tsdeclare module "main" implements SomeValidator lettersRegexp: RegExp; : boolean; implements SomeValidator numberRegexp: RegExp; : boolean;
So now your users can import everything and anything that they want from just one module (main
in this case) and there applications won't break even if you refactor your code into different folders in some future release of your library.
test
folder.
There are a lot more use cases that this plugin can help you with. Some of them have been added in the License
MIT