How to fix e6 module dependency issues?

Question

React I develop the application and Refluxwhich is associated with webpacka babel-loader(v6), and I have problems with addictions e6 modules

For example, I have a component that uses reflux .connect()mixin:

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

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

When I import all the modules separately in each file like this, everything is fine.

Then I tried to improve my code using deconstructed import statements:

... in the component:

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

... and in js/index.js:

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

export { One, Two, Three };

The application source files are more concise using the technique described above, because I can import all the components in one line import.

But when I use it, some dependencies end up beeing undefinedwhen I use them

If I use the same updated example ...

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

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

Parameter

... MyStoreends undefinedin the method Reflux.connect.

I tried to fix the problem in the debugger, but I do not know what happens to the statements __webpack_require__(xxx)in the generated package. There should be a circular dependency that babel-loaderor the required web package could not determine when there are files index.jsthat re-export the individual modules.

Do you know any tool that will help me figure this out? I tried madge, but it does not work with es6 modules, and I could not find anything that could tell me where something was wrong.

Answer 1

, :

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

/.

Answer 2

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:
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 .