Babel，ES6，Webpack - 解构导入的解构答案

【问题标题】：Babel, ES6, Webpack - Destructuring of destructured importsBabel，ES6，Webpack - 解构导入的解构
【发布时间】：2018-09-07 09:40:20
【问题描述】：

正在开发以create-react-app 身份开始的应用程序。

在我的代码中，我有多个命名导入，写法如下：

import {Banana, Apple} from 'fruits'

fruits 模块是一个包含index.js 的文件夹，其中包含export {Banana} from './banana'。 ./banana 导出一个对象 Banana = {bite: ()=>{}}。

所以我希望Foo 是在banana 中导出的对象。

现在，我正在尝试做类似的事情

const {bite} = Banana;

捆绑包构建成功，但是当我运行它时 - 它失败了，说它无法从 undefined 获取 bite。

对我来说真正奇怪的是——它以前没有发生过，但后来它才开始发生，没有特别的原因。但有时 Jest 也会发生这种情况 - 它无法从 undefined 导入 bite。

我现在只是在做

import {Banana} from 'fruits/banana';
import {Apple} from 'fruits/apple';

这样就可以正常工作了。但是，我希望它是

import {Banana, Apple} from 'fruits';
const {bite} = Banana;

有什么可能导致这种情况的想法吗？

我应该怎么做才能使代码保持我想要的方式（见上文）？

【问题讨论】：

你出口香蕉吗？
@IgorAlemasow，我愿意。如果我直接从“fruits/banana”导入香蕉，它就可以了。或者如果我直接使用Banana.bite 而不是const bite = {Banana}
一切看起来都很好，这里是完整的工作示例codesandbox.io/s/7wvvvo88kx。你能用你的代码优化一下吗，也许你的代码有拼写错误？

【解决方案1】：

毕竟，在我们自己的特定设置中，这是一个循环依赖问题（webpack 有时会为直接或不引用它们所使用的脚本的脚本返回 undefined。

我们在每个文件夹中都有一个index.js 脚本（例如fruits），其中一个模块使用了另一个模块（例如Banana 使用了从fruits 导入的Pineapple，而不是直接引用它， fruits/Pineapple)

这个问题一劳永逸地教会了我在每个 webpack 构建中使用 circular-dependency-plugin（并避免循环依赖）

【讨论】：