Generate bundle TypeScript definition file with webpack

Question

I'm currently using "gulp" to generate the definition file of my bundle like this:

dtsGenerator.default({
    name: 'ngFramework',
    project: './',
    out: './Typings/raw/index.d.ts'
});

However, I'm migrating to webpack and I'd like to find a way to do the same. I tried the "declaration" flag in the "tsconfig" but it just creates the definition file for each and every single "ts" file which is not what I want (I want the definition file of the bundle).

I tried "dtsbundler-webpack-plugin" but I couldn't make it work as expected. Without the "declaration" flag of "tsconfig", the generated file is "0 bytes" and with it, I have a lot of errors.

Answer 1

You should use dts-bundle with WebPack to generate bundle. You should leave the declaration flag to true and try the following:

General

var path = require('path');
var rootDir = path.resolve(__dirname);

Write simple plugin

function DtsBundlePlugin() {}
DtsBundlePlugin.prototype.apply = function (compiler) {
    compiler.plugin('done', function () {
        var dts = require('dts-bundle');

        dts.bundle({
            name: 'your-lib-name',
            main: rootDir + '/build/types/**/*.d.ts',
            out: rootDir + '/build/index.d.ts',
            removeSource: true,
            outputAsModuleFolder: true 
        });
    });
};

More information can be found in this blog post by Vladimir Tolstikov .

Register

plugins: [
    new DtsBundlePlugin()
]

I have managed to bundle the typings but I had some issues with bundled code that are related to my source code.

Answer 2

I wrote a plugin for webpack which handles the problem. First, install my package.

npm i -D @ahrakio/witty-webpack-declaration-files

Then, make sure your tsconfig has the declaration property set to true.

{ ...
    declaration: true,
    ...
}

Finally, in your webpack config require the package and set it up under the plugins array.

const DeclarationFilesPlugin = require("@ahrakio/witty-webpack-declaration-files");

...

module.exports = {
    ...
    plugins: [
        ...
        new DeclarationFilesPlugin({
            // options goes here
        })
    ]
}

The options are -

merge: boolean (default: false) - Would you like to merge the declaration files to one file.

include: string[] (default: []) - Name of the files which you would like to be included in the final bundle (Without filename extensions, for MyClass.ts you should mension "MyClass").

exclude: string[] (default: []) - Name of the files which you would like to be excluded from the final bundle.

flatten: boolean (default: false) - If you would like to put all the declaration files in the root path of your dist folder.

Ofcourse, if you leave merge as false, the plugin will generate only the files in the include array, or all the files which are not in the exclude array, according to your configuration - but will not merge them to one file.

Hope it was clear enough. Let me know if you need more help.

Uriah.

Answer 3

Can I suggest using "npm-dts-webpack-plugin". It is zero-configuration plugin.

const NpmDtsPlugin = require('npm-dts-webpack-plugin')

module.exports = {
  ......
  plugins: [
    new NpmDtsPlugin()
  ],
  ......
}

Also, if you would want to use generator directly, try "npm-dts".

All the best :)