使用Webpack生成Bundle TypeScript定义文件

Question

我目前使用 "gulp" 来生成我的捆绑包的定义文件，代码如下:

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

然而，我正在迁移到webpack，并且希望找到一种方法来实现相同的功能。我尝试在“tsconfig”中使用“declaration”标志，但它只为每个“ts”文件创建定义文件，这不是我想要的（我想要捆绑包的定义文件）。

我尝试了“dtsbundler-webpack-plugin”，但无法按预期工作。如果没有“tsconfig”的“declaration”标志，则生成的文件为“0字节”，如果使用该标志，则会出现许多错误。

- ssougnez

Answer 1

你应该使用dts-bundle和WebPack一起生成捆绑包。你应该让声明标志保持为true并尝试以下操作：

常规

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

编写简单插件

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 
        });
    });
};

更多信息可在Vladimir Tolstikov的博客文章中找到。

注册

plugins: [
    new DtsBundlePlugin()
]

我已经成功地打包了类型文件，但是在打包后的代码中遇到了一些与我的源代码相关的问题。

- khorvat

---

这看起来非常像 Vladimir Tolstikov 的这篇博客文章中的代码。你是从那里复制的吗？如果是，给予他人应有的信任是很好的做法。 - Drew Noakes

是的，我使用了他博客文章中的样例，谢谢您提醒我添加原始文章的链接。 - khorvat

Answer 2

我为webpack编写了一个处理问题的插件。首先，安装我的包。

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

然后，确保您的tsconfig文件的declaration属性已设置为true。

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

最后，在你的webpack配置文件中，需要引入该包并在插件数组下进行设置。

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

...

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

选项如下：

合并: 布尔值（默认值：false）- 是否要将声明文件合并为一个文件。

包含：字符串数组（默认值：[]）- 您想要包含在最终捆绑包中的文件的名称（不带文件名扩展名，对于MyClass.ts，您应该提到“MyClass”）。

排除：字符串数组（默认值：[]）- 您想要从最终捆绑包中排除的文件的名称。

扁平化：布尔值（默认值：false）- 如果您想将所有声明文件放在dist文件夹的根路径中。

当然，如果将合并设置为false，则插件将仅生成include数组中的文件，或者根据您的配置生成不在exclude数组中的所有文件-但不会将它们合并为一个文件。

希望这足够清楚。 如果需要更多帮助，请告诉我。

Uriah。

- Uriah Ahrak

---

我认为它与webpack v5不兼容。 - EuberDeveloper

Answer 3

我可以建议使用“npm-dts-webpack-plugin”。它是一个零配置插件。

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

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

另外，如果您想直接使用生成器，请尝试“npm-dts”。

祝一切顺利 :)

- RandomX

---

当在调试模式下使用时，这会出现错误 tsconfig.json(15,5): error TS5053: Option 'declaration' cannot be specified with option 'isolatedModules'. ，并且根本无法工作。 - Ferrybig

这是一个TypeScript问题，最近已经得到修复： https://github.com/microsoft/TypeScript/issues/29490 - RandomX

请记住，npm-dts是在TS上的包装器-大多数功能来自TSC，包括此类错误。因此，这样的错误也可以轻松地在Google上找到。 - RandomX