Ecmascript 6 如何解决es6模块依赖性问题？

我正在开发React&

REFLOW

应用程序，该应用程序由

webpack

与

babel loader

（v6）捆绑，我遇到了es6模块依赖性问题

例如，我有一个组件使用reflow

.connect（）

mixin：

import MyStore from '../stores/my-store';

const Component = React.createClass({
    mixins: [Reflux.connect(MyStore)]
});

当我像这样单独导入每个文件中的所有模块时，一切都很好

然后，我尝试使用解构的导入语句来改进代码：

…在组件中：

//import One from '../js/one';
//import Two from '../js/two';
//import Three from '../js/three';
import { One, Two, Three } from '../js'; // Instead

…在

js/index.js

中：

import One from './one';
import Two from './two';
import Three from './three';

export { One, Two, Three };

使用上述技术，应用程序源代码文件更加简洁，因为我可以在一行

import

中导入所有组件

但是当我使用它时，当我使用它们时，一些依赖项会变成

未定义的

如果我使用相同的更新示例

//import MyStore from '../stores/my-store';
import { MyStore } from '../stores'; // Instead

const Component = React.createClass({
    mixins: [Reflux.connect(MyStore)]
});

…

MyStore

参数在

reflow.connect

方法中结束

undefined

我试图在调试器中进行故障排除，但我不知道生成的bundle中的

\uuuu webpack\u require\uuuuuuuuuuuxxx）

语句发生了什么。必须存在循环依赖项，

babel loader

或webpack require无法确定何时存在重新导出单个模块的

index.js

文件

你知道有什么工具可以帮我解决这个问题吗？我尝试了

madge

，但它不适用于es6模块，我找不到任何东西可以告诉我哪里出了问题

import

语句用于导入从外部模块导出的函数、对象或原语

根据MDN文档，您可以导入模块，而不是目录

import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";

参考URL:

---

作为一种解决方法，将一个文件保留为

base.js

，并包含所有3个文件。

要获取有关构建的扩展信息，请运行：

webpack --profile --display-modules --display-reasons

---

它将为您提供大量优化/评测信息。

您是否使用此技术引入循环依赖关系？我不知道，我想我的应用程序中已经存在循环依赖关系，但它们本身并不是问题，es6 loader对其进行了很好的管理。这是因为在重新导出index.js文件中捆绑了所有存储、所有组件等，从而导致了问题。我不知道为什么或者如何，因此我的问题是：我不知道如何轻松地分析/可视化我的应用程序模块依赖关系：）@Pandaiolo可以做到这一点。您需要执行类似于

webpack--profile--json>stats.json

的操作，以获取工具所需的文件。@bebraw谢谢，很棒的工具！但即使排除babel polyfills，我的包中也有大约600个模块，因此可视化屏幕速度慢且无用。有没有办法特别指出循环或有问题的依赖项？我加载了Chrome Canary和这个repo，但我意识到它不使用

import

语句，而是在index.html中加载每个文件的

标记。无论如何，Chrome 49+是否会加载使用

import

导入的文件？关于npm的

模块如何？开发工具会帮助我解决模块依赖性问题吗？@Pandaiolo，您当前的问题存在于从“../js”导入的{1,2,3}中；对!@Pandaiolo，更新了新答案。请看一看。谢谢，我将添加@bebraw提出的
--json
开关，这对大型应用程序非常有用，虽然它提供了关于捆绑包的更多信息，但它没有识别运行时依赖性问题