4

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

例如，我有一个使用回流.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参数undefined在Reflux.connect方法中结束。

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

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

4

2 回答 2

2

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

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

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

于 2016-02-03T21:46:15.030 回答
0

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

于 2015-12-02T06:44:26.100 回答