使用单个导入模块创建可摇树的 Angular 库

Question

上下文

我正在创建一个具有 2 种初始化方式的库：

1. 自动 - 我为您异步下载一些东西，然后初始化。
2. 手动 - 你之前已经下载了这些东西，然后我立即初始化库（同步）。

我过去曾成功实现过可摇树的库。我们通常会做的是将代码分成两个模块，让应用程序开发人员选择导入哪个模块，从而允许对另一部分进行 tree-shaking。与此类似：

import { LibraryAsyncModule } from 'my-library'; // ???? Or LibrarySyncModule

@NgModule({
    imports: [LibraryAsyncModule] // ???? Or LibrarySyncModule
})
export class AppModule { }

我想要完成的事情✔

为了减少使用我的库的学习曲线，我正在尝试设计一个包含相关模块并允许摇树的单个导入模块。下图显示了所需的结构。

我想避免什么????

我可以创建工厂提供程序来检测传递给forRoot() 的配置并在运行时 加载相应的模块。但是，在运行时导入模块会将初始化变为异步，并且还会阻止 Angular 将使用的模块与应用程序捆绑在一起。

我需要一个构建时间解决方案。我的原型表明，在核心模块中简单地包含同步和异步模块会导致两者都被捆绑在一起。 那个单一的模块会是什么样子？有什么想法/建议吗？ ????

Answer 1

您的方法应该有效，但您需要启用它。

由于 Tree-shaking 仅适用于 es6 模块，您需要使用它发布您的库并在您的 package.json 中指定 module 属性。

// package.json
{
  ...
  "main": "dist/index.js",
  "module": "dist/es/index.js", // <- this file should contain es modules not commonjs
  ...
}

此设置将告诉打包程序（在您的情况下为 webpack）使用 es 模块导出并允许它们启用 tree-shaking 功能。

我建议软件包开发人员使用tsdx cli 工具，它会自动执行此操作并支持许多其他功能，例如 TypeScript 支持等。

npx tsdx create mylib