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

还有一个proposal for 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

我遇到export *的问题，当我导入默认的函数/类时它返回undefined ...

所以，我终于用 export {default} from './MyClass'修复它并且它也有效

Answer 5

文件夹结构：

compoments|
          |_ Nave.js
          |_Another.js
          |_index.js

Nav.js comp 位于 components 文件夹内

export {Nav}

组件文件夹中的index.js

export {Nav} from './Nav';
export {Another} from './Another';

随处导入

import {Nav, Another} from './components'

Answer 6

通过以下方式安装@babel/plugin-proposal-export-default-from：

yarn add -D @babel/plugin-proposal-export-default-from

在您的.babelrc.json或任何Configuration File Types

中

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

现在您可以直接从export file-path：

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

祝你好运...