实施例

Question

我正在尝试汇总js来构建我的打字稿项目，但我不知道如何生成定义文件以及如何将它们自动包含在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配置，但是与declaration = 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/ }
        ]
      }
    }

Tsconfig：

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

使用汇总的打字稿定义文件

强烈建议您仅使用tsc进行编译。 最终应用程序捆绑的预留汇总。

实施例

例如，以typestyle https://github.com/typestyle/typestyle/blob/2349f847abaaddaf3de4ca83f585d293b766959e/package.json#L10

结帐

Answer 2

要执行此任务，您将在rollup.config.js，tsconfig.json和package.json中添加指令

考虑汇总版本^0.62.0"：

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

npm我rollup-plugin-typescript2

2-将库导入rollup.config.js

从“ rollup-plugin-typescript2”导入打字稿

3-在插件块中包含打字稿插件

注意：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的{{1}}中添加compilerOptions指令

注意：我删除了其他说明只是为了使示例更简洁...

示例：

tsconfig.json

5-在{ "compilerOptions": { "declaration": true, }, "include": ["src"], "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"] }内包含main和module指令，以告知输出内容。

最后，将package.json指令包含在rollup -c的{{1}}中，例如：

script

使用汇总生成打字稿定义文件

2 个答案:

实施例