Search code examples
javascriptangulartypescriptframeworkssystemjs

Write an easily consumable Typescript framework

I've been developing a framework published in NPM and everything worked fine. But something is really aching when I use my own framework as a external module. I have to set imports with full paths like this :

import { MyService } 'myframework/all/the/internal/path/myservice.service';

And I have to make one different import statement for each class, service or web component I use from my framework. This is, I suppose, because the declaration files where not exported from a top index.d.ts file.

Thanks to Matthias247, I wrote reexport files correctly in which I export all of the classes in my framework. And when using it as an external NPM module, it works well and I can write all imports like that :

import {MyService, MyClass1, MyClass2, ... } from 'myframework';

Now that this works, I tried to make my compiled JavaScript files a single bundle.js to be loaded by SystemJS just like @angular modules.

And this where I'm really, totally lost... I cannot understand what is or should be the proper way to build such a bundle. Using browserify, every command fails by writing the "NO_MODULE_FOUND" to my bundle.js. So then, I tried to use tsify to run as a plugin of browserify, and it looks like it's doing the right job gathering all classes in one bundle. But little problem, it also bundles all of @angular and RxJS.

Please could someone direct me on how an UMD bundle is supposed to be generated ? I compile with "module: commonjs" option but as any file is recognized as a module by browserify I really don't know what to do.

Solution

  • One possible solution (and the one I'm suggesting) is to setup the exports of your library better, so that you will be able to do

    import {MyService, MyClass1, MyClass2, ... } from 'myframework';

    in the end, even though these types might be defined in a subfolder of your framework.

    The usual way to do this is to exploit reexports. In the main folder of your framework you can have some index.ts while which reexports all the types that are valid for the user.

    Like

    export * from 'myframework/all/the/internal/path/myservice.service';

    In order to not have to reference all types from the main index file you can also do that in hierarchical fashion. E.g. define an index.ts file also in the subfolders, like myframework/all/the/internal/path/index.ts and export all types from this folder in it. Then on the higher level export the subfolder: export * from 'myframework/all/the/internal/path';