javascript - 使用 webpack 生成带打字文件的 typescript 库

Question

目前我的构建过程是:

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

这会生成一个 index.js 文件，该文件会重新导出所有内部文件，而无需开发人员使用它而无需了解它，以及许多反射(reflect)文件结构的 d.ts 文件。

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

现在的主要问题是关于 webpack 我知道我可以加载 TS 并取出一个 commonJS 模块，但是我找不到任何方法来使用 webpack 生成 d.ts 文件。那么有没有办法让我在这种情况下使用 webpack 作为编译器/打包器并输出 my-lib.js 和 my-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"); 或类似方式使用。

Answer 1

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

我还建议您看一下 typescript-library-starter .您会在那里找到设置方式，包括 UMD 包和类型定义:)。