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.

khorvat · Answer 1 · 2017-10-18T13:51:55.097

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.

This looks a lot like the code from [this blog post by Vladimir Tolstikov](https://medium.com/@vladimirtolstikov/how-to-merge-d-ts-typings-with-dts-bundle-and-webpack-e8903d699576). Did you copy it from there? If so, giving credit would be decent of you. — Drew Noakes, Oct 16 '17 at 15:37
Yes I used sample from his blog post, thanks for reminding me to add link to original post. — khorvat, Oct 18 '17 at 13:53

score 1 · Answer 2 · answered Sep 22 '18 at 22:28

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.

I think that it does not work with webpack v5 – EuberDeveloper Dec 22 '20 at 16:23 — EuberDeveloper, Dec 22 '20 at 16:23

score 0 · Answer 3 · answered Feb 25 '19 at 22:08

0

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 :)

answered Feb 25 '19 at 22:08

RandomX

189
1
3

1

This is giving the error `tsconfig.json(15,5): error TS5053: Option 'declaration' cannot be specified with option 'isolatedModules'.` when used in debug mode, and doesn't work at all – Ferrybig Sep 24 '19 at 14:29
This was a TypeScript issue and has been fixed recently: https://github.com/microsoft/TypeScript/issues/29490 – RandomX Sep 27 '19 at 13:59
Keep in mind that npm-dts is a wrapper on top of TS - most of functionality comes from TSC including error like this. Therefor such errors can also be found on Google with ease. – RandomX Nov 11 '22 at 13:51

Generate bundle TypeScript definition file with webpack

3 Answers3

Linked