Generera TypeScript-definitionsfil för paket med webpack

Jag använder för närvarande "gulp" för att generera definitionsfilen för mitt paket på detta sätt:

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

Men jag migrerar till webpack och jag skulle vilja hitta ett sätt att göra samma sak. Jag provade flaggan "declaration" i "tsconfig" men den skapar bara definitionsfilen för varje enskild "ts"-fil, vilket inte är vad jag vill (jag vill ha definitionsfilen för bundlet).

Jag försökte med "dtsbundler-webpack-plugin" men jag kunde inte få det att fungera som förväntat. Utan flaggan "declaration" i "tsconfig" är den genererade filen "0 bytes" och med den har jag många fel.

Svar #1

Du bör använda dts-bundle med WebPack för att generera bundlen. Du bör låta deklarationsflaggan vara sann och prova följande:

Allmän

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

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

Mer information kan hittas i detta blogginlägg av Vladimir Tolstikov.

Registrera

plugins: [
    new DtsBundlePlugin()
]

Jag har lyckats paketera typbestämningarna men jag hade några problem med den paketerade koden som är relaterade till min källkod.

Svar #2

Jag skrev ett plugin för webpack som hanterar problemet. Installera först mitt paket.

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

Se sedan till att din tsconfig har egenskapen declaration inställd på true.

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

Slutligen, i din webpack-konfiguration, importera paketet och konfigurera det under plugins-arrayen.

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

...

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

Alternativen är -

merge: boolean (standard: false) - Vill du slå ihop deklarationsfilerna till en fil.

include: string[] (standard: []) - Namnen på de filer som du vill ska inkluderas i den slutliga paketet (Utan filändelser, för MyClass.ts bör du nämna "MyClass").

exclude: string[] (standard: []) - Namnen på filerna som du vill exkludera från den slutliga paketet.

flatten: boolean (standard: false) - Om du vill placera alla deklarationsfiler i rotmappen för din dist-mapp.

Självklart, om du lämnar merge som false kommer pluginet bara att generera filer i include-arrayen, eller alla filer som inte finns i exclude-arrayen, enligt din konfiguration - men kommer inte att slå ihop dem till en fil.

Hoppas det var tillräckligt tydligt. Låt mig veta om du behöver mer hjälp.

Uriah.

Relaterade artiklar