typescript - 使用汇总生成 typescript 定义文件

Question

我正在尝试使用汇总 js 来构建我的 typescript 项目，但我不知道如何生成定义文件以及如何将它们自动包含在 dist 文件中。

有谁知道怎么做？

这是我的 rollup.config.js

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

我正在使用默认的 ts 配置，但这与声明 = true 相同。

编辑 :

还尝试使用 Webpack :

    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/ }
        ]
      }
    }

配置:

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

生成 d.ts 看起来像这样:

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

但是在我使用该包的应用程序中，它找不到生成器...

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

生成器未定义，但自动完成工作正常，所以我找不到问题出在哪里:(

Generator.generateHtml({
 ...
});

Answer 1

要完成此任务，您将在 rollup.config.js 中添加说明。 , tsconfig.json和 package.json
考虑汇总版本 ^0.62.0" :

1 - 添加 rollup-plugin-typescript2 的库:

npm i rollup-plugin-typescript2

2 - 在 rollup.config.js 中导入库

import typescript from 'rollup-plugin-typescript2'

3 - 在插件块中包含 typescript 插件

注意:下面的 js 只是一个例子，所以我删除了其他说明只是为了让例子更清晰......

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 - 添加 declaration compilerOptions 中的说明的tsconfig.json

注意:我删除了其他说明只是为了让示例更清晰......

例子:

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

5 - 包括 main和 module package.json 中的说明通知输出的位置。

最后，包括 rollup -c script 中的说明的 package.json ， 例子:

{
  "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"
  ]
}