ES6导出/导入索引文件

Question

我目前正在通过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';

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

Answer 1

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

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 '…';.

Answer 2

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

export * from './XThingActions';

Answer 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/';

Answer 4

文件夹结构：

components|
          |_Comp.js
          |_AnotherComp.js
          |_YetAnotherComp.js
          |_index.js

在 Comp.js 文件中...并执行与其他组件类似的操作：

export {Comp}

来自index.js

export {Comp} from './Comp';
export {AnotherComp} from './AnotherComp';
export {YetAnotherComp} from './YetAnotherComp';

现在您可以在任何地方导入

import {Comp, AnotherComp, YetAnotherComp} from './components'

Answer 5

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

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