Using webpack to generate typescript libraries with typing files

Question

Currently my process for building is:

• Write lots of typescript files with ES6 module syntax
• Generate an index.ts which re-exports all modules from one point
• Compile to CommonJS + System
• Output Descriptor/Typing files

This results in an index.js file which re-exports all the internal files without the developer consuming it needing to know about it, as well as a lot of d.ts files which mirror the file structure.

Now this works, but if I were to take this approach to the browser I would need to webpack up all the js or it would be a http request nightmare pulling in all the individual files. Currently this library would be consumed as a dependency for other libraries, so it is not an end point for logic or anything it is a module/library.

Now the main question is with webpack I know I can load TS in and get a commonJS module out, however I cannot find any way to generate d.ts files with webpack. So is there a way for me to use webpack as the compiler/packager in this scenario and have an output my-lib.js and my-lib.d.ts rather than the current approach which yields lots of individual files.

== Extra Clarification on Use Case ==

Just to try and make sure everyone is on the same page here when I say it is a library that would be re-used what I mean is that this is something that would be loaded via npm or jspm or something as a module dependency for other modules.

So for example let us pretend jquery doesn't exist and I am going to create it but write it in typescript for other developers to consume in both JS and TS. Now typescript outputs both js files and d.ts files, the js files are to be used as you would expect, but the d.ts files explain to other typescript files what the types contained within the library are.

So assuming I have developed jquery in TS as listed above, I would then want to publish this output (be it created by webpack or tsc) on npm/jspm/bower etc. So then others can re-use this library in their own projects.

So webpack typically is used to package an "application" if you will, which contains logic and business concerns and is consumed directly as an entry point to a larger set of concerns. In this example it would be used as a compilation and packaging step for a library and would be consumed via var myLib = require("my-lib"); or similar.

Prime

What for d.ts for browser? How it will be used? – Decorator

d.ts is not for browser it is for the "library", as mentioned this entire project would be consumed as a library/module, so the d.ts files are specifically for typescript typing verification, so if I wanted to use the types in this library in another typescript project I would need a d.ts file to describe the types. Like imagine if I was writing jquery in typescript and I wanted to get webpack to convert all the typescript files into a single jquery.js file for inclusion wherever, but also a jquery.d.ts for those who wanted to write typescript including the types in jquery. – Prime

I do not fully understand :) But most likely impossible. As far as I know, even to create a simple file and compressed requires two configurations and two processes. – Decorator

If it is impossible thats fine, I just wanted to see if I could use webpack to simplify things here. – Prime

@Prime Did you made any process by now with that issue? – Meri

@Meri sorry nope, I just ended up using one of the many typescript compiler wrappers to output the descriptors outside of webpack. – Prime

Answer 1

Generating the .d.ts files is not related to webpack. With webpack you can use either ts-loader or awesome-typescript-loader. Both of them make use of tsconfig.json. What you need to do is to add "declaration": true in your tsconfig.json.

I'd also suggest you to take a look at typescript-library-starter. You'll find how's set up there, including UMD bundle and type definitions :).

Location