Question

以下是一个示例存储库，其中显示了此线程中报告的问题的示例：https://github.com/Eux86/tree-shaking-barrel-test/blob/master/README.md

我试图了解使用Barrel文件将其从库项目中导出函数和类的效果，将其导入到另一个使用webpack并应能够进行树状捆绑的项目中时的作用。

想象我有一个项目：

图书馆

index.ts具有以下代码：

export { LibAMain } from 'LibA';
export { LibBMain } from 'LibB';

因此，我使用索引作为桶文件来导出要在我的库中开发的所有功能。

第二个项目将是：

库用户

Index.ts具有以下代码：

import { LibAMain } from 'library'

LibAMain();

现在：库用户是使用webpack构建的，我希望能够对MyLib中未使用的库进行树状交换，但是当我查看生成的包时，我看到它包含启动LibA.js和LibB.js，不应该在那里：

如果我将index.ts更改为：

import { LibAMain } from 'library/lib/LibA'

LibAMain();

然后webpack很好地完成了工作，最后一捆中我只看到LibA：

TL; DR：如何继续使用桶索引文件，仅从“库”中导入所有内容，但仍然可以进行树状握手？

谢谢您的帮助：）

Answer 1

您的代码中似乎是模块问题，而不是webpack。
tsconfig.json

...
"module": "commonjs",
...

在Webpack中，Commonjs模块系统doesn't support摇树（只有像您在mylib/libA上所做的那样直接导入）。
要修复github存储库中的树状抖动，您应该使用module中的es2015：esnext或tsconfig.json。

...
"module": "esnext",
...

但是您是对的-幸运的是，摇树并不是webpack的最佳选择。
有几种方法可以更好地摇动树：