Nearsighted Paramecium Multiverse

    dtsbundler-webpack-plugin

    1.0.0 • Public • Published

    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

    Install

    npm i dtsbundler-webpack-plugin

    DownloadsWeekly Downloads

    31

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • awayfoundation