webpack - rollup kullanarak typescript tanım dosyaları oluştur

Typescript projemi derlemek için rollup js deniyorum ama tanım dosyalarını nasıl oluşturacağımı ve bunları dist dosyalarına otomatik olarak nasıl dahil edeceğimi bilmiyorum.

Bunu nasıl yapacağını bilen var mı?

İşte benim rollup.config.js dosyam

import typescript from "rollup-plugin-typescript";
import handlebars from "rollup-plugin-handlebars";
import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/generator.ts',
  format: 'cjs',
  plugins: [
    typescript(),
    handlebars(),
    babel()
  ],
  dest: 'dist/bundle.js'
};

Varsayılan ts yapılandırmasını kullanıyorum ama bu, declaration=true ile aynı.

düzenle :

Ayrıca Webpack kullanmayı da deneyin :

    module.exports = {
      context: __dirname + '/src',
      entry: {
        index: './generator'
      },
      output: {
        path: __dirname + '/build',
        publicPath: '/',
        filename: 'generator.js'
      },
      resolve: {
        root: __dirname,
        extensions: ['', '.ts', '.js']
      },
      module: {
        loaders: [
          { test: /\.ts$/, loaders: ['ts-loader'], exclude: /node_modules/ },
          { test: /\.hbs/, loaders: ['handlebars-loader'], exclude: /node_modules/ }
        ]
      }
    }

Tsconfig :

    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": true,
        "outDir": "build"
      },
      "exclude": [
        "node_modules",
        "dist",
        "build"
      ]
    }

Oluşturulan d.ts şöyle görünüyor:

    import { ExportPageModel } from './models/page-model';
    export declare type ExportType = 'text' | 'html';
    export * from './models/page-model';
    export declare namespace Generator {
        function generateHtml(page: ExportPageModel): string;
        function generateText(page: ExportPageModel): string;
    }

Ama uygulamamda o paketi kullanırken Generator'ı bulamıyor...

import { ExportPageModel, Generator } from 'emlb-generator';

Jeneratör tanımsız ama otomatik tamamlama sorunsuz çalışıyor, bu yüzden sorunun nerede olduğunu bulamıyorum :(

Generator.generateHtml({
 ...
});

Cevap #1

Bu görevi yapmak için talimatları rollup.config.js, tsconfig.json ve package.json dosyalarına ekleyeceksiniz

Rollup sürümü ^0.62.0 göz önüne alındığında:

1 - rollup-plugin-typescript2 kütüphanesini ekleyin:

npm i rollup-plugin-typescript2

2 - Kütüphaneyi rollup.config.js dosyasının içine aktarın

import typescript from 'rollup-plugin-typescript2'

3 - Typescript eklentisini plugin bloğunun içine dahil edin

Notlar: Aşağıdaki js sadece bir örnektir, bu yüzden örneği daha temiz tutmak için diğer talimatları kaldırdım...

import typescript from 'rollup-plugin-typescript2'

export default {
  input: 'src/index.tsx',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      exports: 'named',
      sourcemap: true
    },
    {
      file: pkg.module,
      format: 'es',
      exports: 'named',
      sourcemap: true
    }
  ],
  plugins: [
    typescript({
      rollupCommonJSResolveHack: false,
      clean: true,
    })
  ]
}

4 - tsconfig.json dosyasındaki compilerOptions kısmına declaration talimatını ekleyin

Notlar: Örneği daha temiz tutmak için diğer talimatları kaldırdım...

Örnek :

{
  "compilerOptions": {
    "declaration": true,
  },
  "include": ["src"],
  "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
}

5 - package.json içinde çıktının nereye gideceğini belirtmek için main ve module talimatlarını dahil edin.

Ve nihayet, package.json içindeki script'e rollup -c komutunu ekleyin, örnek:

{
  "name": "example",
  "version": "0.1.6",
  "description": "Testing",
  "author": "Example",
  "license": "AGPL-3.0-or-later",
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:main": "dist/index.es.js",
  "scripts": {
    "build": "rollup -c",
    "start": "rollup -c -w"
  },
  "files": [
    "dist"
  ]
}

İlgili makaleler