ecmascript-6 - 如何排查 es6 模块依赖问题？

Question

我正在开发一个 React 和 Reflux应用程序，由 webpack 捆绑与 babel-loader (v6)，我遇到了 es6 模块依赖问题

例如，我有一个使用回流的组件 .connect()混音:

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线。

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

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

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

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

... MyStore参数结束 undefined在 Reflux.connect方法。

我试图在调试器中进行故障排除，但我并不真正了解 __webpack_require__(xxx) 发生了什么。生成的包中的语句。必须有一个循环依赖 babel-loader或 webpack 要求无法确定何时有 index.js重新导出单个模块的文件。

你知道有什么工具可以帮助我解决这个问题吗？我试过madge但它不适用于 es6 模块，我找不到任何可以告诉我哪里有问题的东西

Answer 1

为了获得关于构建的扩展信息，运行:

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

它将为您提供大量用于优化/分析的信息。