使用 Typescript 创建 Webpack 捆绑库答案

【问题标题】：Creating a Webpack Bundled Library with Typescript使用 Typescript 创建 Webpack 捆绑库
【发布时间】：2016-07-05 10:12:45
【问题描述】：

我正在尝试构建一个 typescript 组件库，该库将由另一个同样基于 typescript 的库使用。我们目前正在使用 webpack 来完成我们的打包，使用 ts-loader 作为加载器来消费 TS 文件。

我不确定如何为下面的示例库生成 .d.ts 文件。 Typescript 确实构建了 .d.ts 文件（declaration 设置为 true），但它是每个模块一个文件，我需要一个可供消费者使用的 .d.ts 文件。

所以我的问题是，是否有一个典型的例子来说明如何做到这一点？有没有办法让打字稿消费者正确导入这些 .d.ts 文件？目前，网上似乎很少有文档和示例，希望能提供任何帮助。

【问题讨论】：

您是否考虑过使用 grunt 或 gulp 以及使用 tsc --declaration 命令或构建后命令（如果您使用的是 VS）？
我们使用 ts-loader，它使用声明设置为 true 的 tsconfig.json 文件运行 ts 编译器。但是，这会生成一个 d.ts 文件 PER 模块。如果这没问题，但感觉不行，那么这个也是基于 typescript 的消费项目怎么能消费它。
@RayBooysen 你最后是怎么解决的？了解您的最终解决方案会很有帮助。
@YaroslavYakovlev 抱歉，刚刚添加了答案。

【解决方案1】：

所以我的问题是，是否有一个典型的例子来说明如何做到这一点？有没有办法让打字稿消费者正确导入这些 .d.ts 文件

您通常不希望将 bundle 用作模块使用者。这是使用图书馆作为最终网站工件的人的工作。这意味着在您的节点模块部署的工件中，您只有彼此相邻的 foo.ts/foo.js。这些可以像 TypeScript 编译器一样使用。

【讨论】：

不确定“您通常不想将捆绑包用作模块使用者”是什么意思如果不是，我应该使用什么？我无法证明将模块中的原始源用作消费者是合理的，因为该库可能具有我不想处理的依赖项。例如，一个库可能使用 LESS/SASS 文件，我不想编译。
所有这些 css 样式文件都应该成为最终消费者项目的一部分，他们可以选择如何捆绑它（单个文件或拆分等）
我不是这个意思。如果我是一个图书馆建设者，我可能会使用很多需要处理的技术，比如 SASS。这不应该是图书馆消费者的责任，因为他们不想承担必须拥有这个处理的负担。这意味着库开发人员需要输出纯 JS 和 CSS，而不是 TS 和 SASS。

【解决方案2】：

我最终在 Typescript Github 页面上打开了一个问题，他们已经确认这是不可能的：

【讨论】：

【解决方案3】：

dts-bundle 为此目的发挥了作用。

这是一个如何将其设置为 Webpack 插件的示例： Typings in one bundle

【讨论】：

更多