14

目前我的构建过程是:

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

这会产生一个 index.js 文件,该文件重新导出所有内部文件,而开发人员无需使用它就需要知道它,以及许多反映文件结构的 d.ts 文件。

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

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

== 对用例的额外说明 ==

当我说它是一个可以重复使用的库时,只是为了确保每个人都在同一页面上模块。

因此,例如,让我们假装 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");或类似方式使用。

4

1 回答 1

5

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

我还建议您看一下typescript-library-starter。你会发现那里是如何设置的,包括 UMD 包和类型定义:)。

于 2017-04-11T23:27:31.803 回答