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

Question

语境

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

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

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

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

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

我想要完成的事情✔</h2>

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

我想避免的

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

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

标签： javascriptangulartypescriptwebpack

Answer 1

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

由于 Tree-shaking 仅适用于es6模块，因此您需要使用它发布您的库并module在package.json.

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

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

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

npx tsdx create mylib