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

Posted 2023-03-13

【中文标题】使用汇总生成打字稿定义文件

【英文标题】：Generate typescript definition files using rollup

【发布时间】：2017-05-10 20:06:15

【问题描述】：

我正在尝试使用 rollup 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 配置，但与 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(
 ...
);

【参考方案1】：

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

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

示例

例如，查看 typestyle https://github.com/typestyle/typestyle/blob/2349f847abaaddaf3de4ca83f585d293b766959e/package.json#L10 中的构建

【讨论】：

好的，但我使用把手作为外部依赖，以及如何使用 tsc 管理模板？

当我尝试仅使用 tsc 构建时，它找不到模板：找不到模块'./templates/html/html.structure.template.hbs'

【参考方案2】：

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

考虑汇总版本^0.62.0"：

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

npm i rollup-plugin-typescript2

2 - 将库导入rollup.config.js

从“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 - 在tsconfig.json的compilerOptions中添加declaration指令

注意：我删除了其他指令只是为了保持示例更清晰...

例子：

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

5 - 在 package.json 中包含 main 和 module 指令以告知输出位置。

最后，在package.json 的script 中包含rollup -c 指令，例如：

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

【讨论】：

非常感谢这里的详细程度。谢谢！