目前我的构建过程是:
- 使用 ES6 模块语法编写大量打字稿文件
- 生成一个 index.ts 从一个点重新导出所有模块
- 编译为 CommonJS + System
- 输出描述符/键入文件
这会产生一个 index.js 文件,该文件重新导出所有内部文件,而开发人员无需使用它就需要知道它,以及许多反映文件结构的 d.ts 文件。
现在这行得通,但是如果我要对浏览器采用这种方法,我需要将所有 js 打包起来,否则这将是一个 http 请求的噩梦,它会拉入所有单独的文件。目前,该库将作为其他库的依赖项使用,因此它不是逻辑的终点,也不是任何模块/库。
现在主要问题是使用 webpack,我知道我可以加载 TS 并取出一个 commonJS 模块,但是我找不到任何d.ts
使用 webpack 生成文件的方法。那么有没有办法让我在这种情况下使用 webpack 作为编译器/打包器并有一个输出my-lib.js
,my-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");
或类似方式使用。