时间戳

首页 > 解决方案 > Babel，ES6，Webpack - 解构导入的解构

javascript - Babel，ES6，Webpack - 解构导入的解构

问题描述

开发以create-react-app.

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

import {Banana, Apple} from 'fruits'

该fruits模块是一个文件夹index.js，其中有export {Banana} from './banana'某个地方。即./banana导出一个对象Banana = {bite: ()=>{}}。

所以我期望Foo成为导出的对象banana。

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

const {bite} = Banana;

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

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

现在我只是在做

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

它以这种方式工作得很好。但是，我希望它是

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

关于可能导致这种情况的任何想法？

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

标签： javascriptwebpackbabeljscreate-react-app

解决方案

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

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

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

推荐阅读