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

Question

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

例如，我有一个使用回流.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 中导入所有组件。

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

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

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

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

...MyStore 参数在 Reflux.connect 方法中以 undefined 结尾。

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

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

Answer 1

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";

参考网址：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
http://es6-features.org/#ValueExportImport
https://github.com/lukehoban/es6features#modules
http://www.2ality.com/2014/09/es6-modules-final.html

作为一种解决方法，将一个文件保留为 base.js，并包含所有 3 个文件。

Answer 2

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

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

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