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

显然这不是一个很好的解决方案,所以我在想,有没有其他的办法。我似乎不能直接导出导入的组件。


当前回答

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

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

还有一个ES7 ES8的提议,将允许您从“…”;

其他回答

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

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

还有一个ES7 ES8的提议,将允许您从“…”;

此外,请记住,如果您需要一次导出多个函数,例如您可以使用的操作

export * from './XThingActions';

太晚了,但我想分享我解决它的方法。

有模型文件,有两个命名导出:

export { Schema, Model };

并有控制器文件,它有默认的导出:

export default Controller;

我在索引文件中以这样的方式暴露:

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

export { Schema, Model, Controller };

假设我想导入所有的:

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

对我来说有用的是添加type关键字:

export type { Comp1, Comp2 } from './somewhere';

安装@babel/plugin-proposal-export-default-from

yarn添加-D @babel/plugin-proposal-export-default-from

在你的。babelrc里。json或任何配置文件类型

module.exports = {
  //...
  plugins: [
     '@babel/plugin-proposal-export-default-from'
  ]
  //...
}

现在你可以直接从文件路径导出:

export Foo from './components/Foo'
export Bar from './components/Bar'

祝你好运…