dtsbundler-webpack-plugin

Description

This library takes separate declaration asset files generated by the webpack build process and bundles them into one single declaration file. Inspired by @floyon

When to use this

This plugin, with a setup as below, flattens class hierarchies in a module to a single d.ts file used by the entry point (usually index.ts) The usecase allows a module to have a single d.ts file at the root or dist/ level rather than many d.ts files scattered throughout the source folder

Options:

• out: the path where the combined declaration file should be saved.

Requirements:

This plugin was developed as an extention to the ts-loader which - when declaration is set to true in tsconfig.json - generates separate declaration files for each source file. In theory though, it should work with any loader which generates declaration files as output.

Here is an example setup:

//index.ts
export {default as Foo} './src/foo';
export {default as Foo2} './src/foo2';

//src/foo.ts
export default class Foo
{
    bar():boolean
    {
    	return true;
    }
}

//src/foo2.ts
import Foo './foo';

export default class Foo2 extends Foo
{
    bar():boolean
    {
    	return true;
    }
}

Which generates (when using the declaration=true flag for the typescript compiler)

//index.d.ts
export {default as Foo} './src/foo';
export {default as Foo2} './src/foo2';

//foo.d.ts
declare class Foo {
    bar():boolean;
}
export default Foo;

//foo2.d.ts
import Foo './foo';
declare class Foo2 extends Foo {
    bar():boolean;
}
export default Foo2;

Which with the following webpack.config.js

var DtsBundlerPlugin = require('dtsbundler-webpack-plugin');
module.exports = {
    entry: './index.ts',
    output: {
        filename: './dist/index.js'
    },
    resolve: {
        extensions: ['', '.ts', '.tsx','.webpack.js', '.web.js', '.js']
    },
    module: {
        loaders: [
            { test: /\.ts(x?)$/, loader: 'ts-loader' }
        ]
    },
    watch:true,
    plugins: [
        new DtsBundlerPlugin({
            out:'./dist/index.d.ts',
        })
    ]
}

Will be turned into:

//index.d.ts
declare class Foo {
	bar():boolean;
}

declare class Foo2 extends Foo {
	bar():boolean;
}

With this setup and generated declaration file, other modules that want to use this module can add a reference to the generated index.d.ts. They can then access all classes of the module as if they are defined in the index.ts of the module