ES6导出/导入索引文件

我目前正在通过webpack/babel在React应用程序中使用ES6.我正在使用索引文件来收集模块的所有组件并将其导出.不幸的是,这看起来像这样:

import Comp1_ from './Comp1.jsx';
import Comp2_ from './Comp2.jsx';
import Comp3_ from './Comp3.jsx';

export const Comp1 = Comp1_;
export const Comp2 = Comp2_;
export const Comp3 = Comp3_;

所以我可以很好地从其他地方导入它,如下所示:

import { Comp1, Comp2, Comp3 } from './components';

显然这不是一个非常好的解决方案,所以我想知道,如果有任何其他方式.我似乎无法直接导出导入的组件.

1> Bergi..：

---

您可以轻松地重新导出默认导入:

export {default as Comp1} from './Comp1.jsx';
export {default as Comp2} from './Comp2.jsx';
export {default as Comp3} from './Comp3.jsx';

还有一个ES7 ES8的建议可以让你写export Comp1 from '…';.

---

除ES8提议外,您还可以使用代码生成来维护索引文件.看看https://github.com/gajus/create-index和https://github.com/ryardley/indexr.

---

另见类似的模式[这里](http://stackoverflow.com/a/32230064/1048572)和[这里](http://stackoverflow.com/q/29722270/1048572)

---

@amann本身的循环引用并不坏,但*可能*会导致问题,具体取决于模块的功能.无论如何,我认为你应该只在库的索引文件中使用这个模式来导出所有组件,如果你有模块间依赖关系,你应该直接导入它们而不是从大文件中导入部分.这样,此模式不会引入循环引用.

2> 小智..：

---

另外,请记住,如果您需要一次导出多个功能,就像您可以使用的操作一样

export * from './XThingActions';

---

是.不幸的是,这个_only_采用命名导出,即它不包括默认导出.

3> 小智..：

---

太晚但我想分享我解决它的方式.

拥有model两个名为export的文件:

export { Schema, Model };

并且具有controller默认导出的文件:

export default Controller;

我index以这种方式暴露在文件中:

import { Schema, Model } from './model';
import Controller from './controller';

export { Schema, Model, Controller };

并假设我想要导入所有这些:

import { Schema, Model, Controller } from '../../path/';

4> pirs..：

---

我有一个问题export *,undefined当我导入默认函数/类时它返回...

所以,我终于解决了它, export {default} from './MyClass'它也运作良好