索引文件中的 ES6 exporting/importing

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 { 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

简单地说：

// Default export (recommended)
export {default} from './MyClass' 

// Default export with alias
export {default as d1} from './MyClass' 

// In >ES7, it could be
export * from './MyClass'

// In >ES7, with alias
export * as d1 from './MyClass'

或按函数名称：

// export by function names
export { funcName1, funcName2, …} from './MyClass'

// export by aliases
export { funcName1 as f1, funcName2 as f2, …} from './MyClass'

更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Answer 5

通过以下方式安装 @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'

祝你好运...

Answer 6

文件夹结构：

components|
          |_ Nave.js
          |_Another.js
          |_index.js

Nav.js 组件文件夹中的 comp

export {Nav}

index.js 在组件文件夹中

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

随处导入

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

Answer 7

对我有用的是添加 type 关键字：

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