在Webpack 4中混合导入es6和cjs有什么后果?

时间:2019-04-21 16:35:30

标签: javascript webpack commonjs es6-modules

WebPack 4允许在绑定节点模块时进行树抖动,并要求es6模块能够成功应用树抖动(https://webpack.js.org/guides/tree-shaking/)。模块的es6版本通过module条目公开,而es5版本通过main条目公开。

在我的场景中,我有一些仅公开main模块和一些暴露模块,并且它们相互引用。我想知道最终的Webpack捆绑包中的预期结果是什么。

示例:

ModuleA exposes both main and module
ModuleB exposes both main and module
ModuleC exposed only main
Driver is the application bundled via webpack 4.

依赖关系是:

Driver -> [ModuleB, ModuleC]
ModuleB -> [ModuleA]
ModuleC -> [ModuleA]

我的问题是: -捆绑包中有多少个ModuleA副本? -webpack是否可以对ModuleA进行树状交换?

我使用rxjs(在我的示例中为ModuleA)解决了这个问题。我有一个使用rxjs的原始CJS模块和一个使用rxjs的es6模块。我发现,webpack包含rxjs的两个副本,即es6版本和es5版本,这导致了“ isObservable”检查中的不兼容(无法识别es5版本的Observable副本与Observable兼容)。从es6版本开始)。

根据我的测试,如果可以同时通过es6和cjs模块(直接)引用es6模块,则在webpack构建中混合使用es6和cjs模块似乎是一个问题。

我想知道这是否属实。 如果是这样,那么这意味着我(可能还有其他Webpack用户)将必须详细了解所使用模块的依赖关系链,以及链中每个模块的性质(es6与cjs)。

webpack中是否有任何方法可以确保避免重复包含模块?

0 个答案:

没有答案