编写易于使用的 Typescript 框架

Question

我一直在开发一个在 NPM 中发布的框架，一切正常。但是，当我将自己的框架用作外部模块时，确实有些痛苦。我必须像这样设置具有完整路径的导入：

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

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

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

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

现在这行得通了，我试着让我编译的 JavaScript 文件成为一个 bundle.js 由 SystemJS 加载，就像 @angular 模块一样。

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

有人可以指导我应该如何生成 UMD 包吗？我使用 "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';

编写易于使用的 Typescript 框架

Write an easily consumable Typescript framework

javascript

frameworks

typescript

systemjs

angular