使用Typescript创建Webpack捆绑库

Question

I'm trying to build a library of typescript components that will be consumed by another library that is also typescript based. We are currently using webpack to accomplish our bundling, with ts-loader as the loader to consume the TS files.

I'm unsure of how to generate the .d.ts files for the example library below. Typescript does build the .d.ts files (with declaration set to true) but it is one file per module where I need one .d.ts file that can be used by consumers.

https://github.com/raybooysen/typescript-webpack-example

So my question is, is there a canonical example of how to accomplish this? Is there a way that typescript consumers can import these .d.ts files correctly? At the moment there seems to be very little documentation and examples on the net and would appreciate any help.

Answer 1

I eventually opened an issue on the Typescript Github page and they have confirmed this is not possible:

https://github.com/Microsoft/TypeScript/issues/8372#issuecomment-217219512

Answer 2

So my question is, is there a canonical example of how to accomplish this? Is there a way that typescript consumers can import these .d.ts files correctly

You generally do not want to use the bundle as a module consumer. That is a job of the person who uses the library as a final website artifact. This means you only have foo.ts / foo.js next to each other in your node module deployed artifacts. These can be consumed as it is with the TypeScript compiler.

More

https://basarat.gitbooks.io/typescript/content/docs/quick/nodejs.html

Answer 3

dts-bundle works like a charm for this purpose.

Here is an example of how to set it up as a Webpack plugin: Typings in one bundle