用WebPack生产可摇晃的ESM库 我有一个Typescript CJS库（common-fe），我在Next.js App（app-fe）中使用。 我开始使用ESM输出的V2工作，希望库是完全模块化的，树木shakea ...

Question

基本上是

WebpackBundleAnalyzer

输出中发生的变化。

前（cjs）：

NODE_MODULES与主捆绑在一起的node_modules约为6 Mb，共同FE只是一个块，其重量为64 kb。

但在并行我可以看到：ts-luxon加载了UMD和CJS，RXJS和 @AWS-SDK/Client-Dynamodb，Firebase，mylogger

（ESM）：

与主捆绑在一起

app.js
• 降低至4 MB左右，现在是一个块，其中包括： @aws-sdk，firebase，rxjs和其他一些deps ...

  因此，我了解到的是，至少现在这些依赖项与common-fe相关，这很好。现在，TS-Luxon只使用UMD（谁知道原因，但这不是问题，因为我也将其转换为ESM以完全避免问题）。
  不好的是拥有@AWS和RXJ，在App-Fe中没有使用。
  

  到目前为止，我尝试使用的是使用命名的顶级出口，所以我从此
  node_modules

  ：

  ：
• app.js

  to to to：

  index.ts

  但这无济于事。 我什至添加了

  circulardentyplugin

  以检查是否有圆形依赖性，但没有。
  确实有帮助的是完全删除了Kikdynamoservice。
但我无法做的事情，之后是访问它的问题和模块的问题（App-Fe使用节点ModuleReSolution）。

可能是解决这个问题的好方法，它可能避免创建一个单独的库（Alghough这个想法开始变得更强大）？

Edit1

所以我发现的是基本上是通过运行

export const VERSION = "__BUILD_VRS__" as const; // REPLACED WITH WEBPACK

export * from "./shared/api";
export * from "./shared/common";
export * from "./shared/giftcard";
export * from "./shared/marketing-cloud";
export * from "./shared/utils";
export * from "./shared/user";
export * from "./services";

我获得了按我打算的方式来工作。

这一点我缺少的是如何使用WebPack产生此类输出并仍然利用其他插件：Terser，Circulardentencies等。

我仍然需要对此进行测试，因为目前我正在为测试建立额外的CJ（玩笑是屁股的另一个痛苦，但可能有了新的输出，它可能正常工作）...

so知道WebPack检查至少循环依赖项。

也许我可以返回越野，我从一开始就使用了……这应该能够编译和缩小我打算的方式...

WebPack无法完成您想做的事情。 这是因为WebPack旨在捆绑Web应用程序。

因此，尽管您可能会手动分开模块的运气（例如，您是在谈论KikdyNamoservice：如果您删除所有参考文献并将其自行置于WebPack配置中的条目），那么您可能会更好地更改运气。 SO汇总是一种选择，但是您可能需要探索Esbuild，这是更快的速度，可以进行转换，降低和缩小。 幸运的好友