Question

我目前正在使用＆＃34; gulp＆＃34;生成我的包的定义文件，如下所示：

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

但是，我正在迁移到webpack，我想找到一种方法来做同样的事情。我尝试了＆＃34;声明＆＃34;标记在＆＃34; tsconfig＆＃34;但它只是为每一个单独的＆＃34; ts＆＃34;创建定义文件。文件不是我想要的（我想要捆绑的定义文件）。

我试过＆＃34; dtsbundler-webpack-plugin＆＃34;但我无法按预期工作。没有＆＃34;声明＆＃34; ＆＃34; tsconfig＆＃34;的标志，生成的文件是＆＃34; 0字节＆＃34;有了它，我有很多错误。

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

可以找到更多信息in this blog post by Vladimir Tolstikov。

注册

plugins: [
    new DtsBundlePlugin()
]

我已经设法捆绑了这些打字，但是我遇到了与我的源代码相关的捆绑代码的一些问题。

Answer 2

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

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

然后，确保您的tsconfig的声明属性设置为true。

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

最后，在您的webpack配置中，需要该软件包并将其设置在plugins数组下。

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

...

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

选项是-

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

include：string []（默认值：[]）-您希望包含在最终捆绑包中的文件名（不带文件扩展名，对于MyClass.ts，您应该提及“ MyClass”）。

排除：字符串[]（默认值：[]）-您希望从最终捆绑软件中排除的文件名。

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

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

希望很清楚。让我知道您是否需要更多帮助。

乌里亚。

Answer 3

我可以建议使用“ npm-dts-webpack-plugin”吗？这是零配置插件。

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

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

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

一切顺利：）

使用webpack生成bundle TypeScript定义文件

3 个答案: