使用webpack生成带有键入文件的typescript库

时间:2016-01-14 09:44:19

标签: javascript typescript webpack tsd

目前我的建设流程是:

  • 使用ES6模块语法编写大量打字稿文件
  • 生成一个index.ts,从一个点重新导出所有模块
  • 编译到CommonJS +系统
  • 输出描述符/键入文件

这导致一个index.js文件重新导出所有内部文件,而开发人员不需要知道它,以及许多反映文件结构的d.ts文件。

现在这样可行,但如果我将这种方法用于浏览器,我需要对所有js进行webpack,否则它将是一个http请求噩梦,将所有单个文件拉入。目前这个库将作为其他库的依赖项使用,因此它不是逻辑或任何模块/库的终点。

现在主要的问题是webpack我知道我可以加载TS并获得一个commonJS模块,但我找不到任何方法用webpack生成d.ts文件。那么有一种方法可以让我在这个场景中使用webpack作为编译器/打包器,并且输出my-lib.jsmy-lib.d.ts而不是当前的方法,它产生了大量的单个文件。

==关于用例的额外澄清==

当我说它是一个可以重复使用的库时,试着确保每个人都在同一页面上我的意思是这是通过npm或jspm或某些东西作为模块加载的东西其他模块的依赖性。

例如,让我们假装jquery不存在,我将创建它,但是将其写入typescript中,供其他开发人员在JS和TS中使用。现在,typescript输出js文件和d.ts文件,js文件将按照您的预期使用,但d.ts文件向其他typescript文件解释库中包含的类型是什么。

假设我已经在TS中开发了如上所列的jquery,那么我想在npm / jspm / bower等上发布这个输出(由webpack或tsc创建)。那么其他人可以重新使用这个库他们自己的项目。

因此,webpack通常用于打包"应用程序"如果你愿意的话,它包含逻辑和业务问题,并直接作为一系列问题的切入点消费。在此示例中,它将用作库的编译和打包步骤,并将通过var myLib = require("my-lib");或类似方式使用。

1 个答案:

答案 0 :(得分:3)

生成.d.ts文件与webpack无关。使用webpack,您可以使用ts-loader或awesome-typescript-loader。他们都使用tsconfig.json。您需要做的是declaration: true 中添加tsconfig.json

我还建议你看一下typescript-library-starter。您将在那里找到如何设置,包括UMD包和类型定义:)。