Question

我正在开发一个React＆amp; Reflux与webpack（v6）捆绑在一起的babel-loader应用，我遇到了es6模块依赖问题

例如，我有一个使用回流.connect() mixin的组件：

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

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

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

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

...在一个组件中：

//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文件重新导出单个模块时，必须存在index.js或webpack所需的循环依赖关系。

你知道任何可以帮助我解决这个问题的工具吗？我试过madge但它不能用于es6模块，我找不到任何可以告诉我哪里出错的地方

Answer 1

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

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

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

Answer 2

import语句用于导入从外部模块导出的函数，对象或基元。

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

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个文件。

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

2 个答案: