javascript - 编写一个易于使用的 Typescript 框架

Question

我一直在开发一个在 NPM 中发布的框架，一切都运行良好。但是当我使用自己的框架作为外部模块时，确实有些痛苦。我必须使用完整路径设置导入，如下所示:

import { MyService } 'myframework/all/the/internal/path/myservice.service';

我必须为框架中使用的每个类、服务或 Web 组件创建一个不同的导入语句。我想，这是因为声明文件不是从顶部 index.d.ts 文件导出的。

感谢 Matthias247，我正确编写了重新导出文件，在其中导出了框架中的所有类。当将它用作外部 NPM 模块时，它运行良好，我可以像这样编写所有导入:

import {MyService, MyClass1, MyClass2, ... } from 'myframework';

现在这可以工作了，我尝试将编译后的 JavaScript 文件制作为一个单一的 bundle.js，以便像 @Angular 模块一样由 SystemJS 加载。

这让我真的完全迷失了......我不明白什么是或应该是构建这样一个 bundle 的正确方法。使用 browserify，每个命令都会因将“NO_MODULE_FOUND”写入我的bundle.js而失败。然后，我尝试使用 tsify 作为 browserify 的插件运行，看起来它正在正确地将所有类收集在一个包中。但没什么问题，它还捆绑了所有 @angular 和 RxJS。

请有人指导我如何生成 UMD bundle ？我使用“module: commonjs”选项进行编译，但由于任何文件都被 browserify 识别为模块，我真的不知道该怎么办。

Answer 1

一种可能的解决方案(也是我建议的解决方案)是更好地设置库的导出，以便您能够做到

import {MyService, MyClass1, MyClass2, ... } from 'myframework';

最后，即使这些类型可能定义在框架的子文件夹中。

通常的方法是利用再导出。在框架的主文件夹中，您可以有一些index.ts，同时它会重新导出对用户有效的所有类型。

喜欢

export * from 'myframework/all/the/internal/path/myservice.service';

为了不必引用主索引文件中的所有类型，您也可以以分层方式执行此操作。例如。也在子文件夹中定义一个 index.ts 文件，例如 myframework/all/the/internal/path/index.ts 并导出该文件夹中的所有类型。然后在更高级别导出子文件夹:export * from 'myframework/all/the/internal/path';