ES6/Babel是否支持多个类的导入？

Question

我正在开发一个react项目（我的第一个），最近重新调整了文件夹结构，以便更加合理。

为了让我的生活更轻松，在我的组件文件夹中，我有一个名为index.js的文件，其内容如下：

export * from './App';
export * from './Home';
export * from './PageWrapper';

（这个想法是从另一个 StackOverflow 问题中提取的）

在这种情况下，此索引指向的每个文件都有一个单数类导出。

现在，在我的主要应用程序中，我尝试执行以下操作：

import {Home, App} from './containers/index';
//or
import Home from './containers/index';

什么都不起作用。我发现如果将它们全部分开成单独的行，直接指向正确的文件，那么它就会起作用。

import Home from './containers/Home';
import App from './containers/App';

我这样做，导入多个类是可行的吗？我可能需要给它们全部命名为（App as App）吗？或者这只是一个强制限制？

- cdutson

---

你能展示一下 App.js、Home.js 或 PageWrapper.js（导出行）中的其中一个吗？ - mostruash

Answer 1

您可以这样导出：

import App from './App';
import Home from './Home';
import PageWrapper from './PageWrapper';

export {
    App,
    Home,
    PageWrapper
}

然后，在您需要的任何地方可以像这样进行导入：

import { App, PageWrapper } from './index' //or similar filename

...

您可以在这里阅读有关导入和导出的更多信息。我还在这里回答了一个类似的问题。

- Mario Tacke

---

谢谢！这正是我所需要的。 - cdutson

没问题。顺便说一下，如果你将你的组件导出到一个 index.js 中，那么你可以轻松地导入它们而不需要直接定位文件。例如，你有一个文件夹叫做 components，在里面你有 Home.jsx、App.jsx 和 index.js。无论在哪里进行导入，只要像这样定位 components 即可：import { Home, App } from './components'; - Mario Tacke

但在这种情况下，我们需要给出相对路径到 index.js 文件，在那里我们需要导入!!! - TalESid

node.js 会首先查找 index.js，因此您不必显式地将其放入路径中。 - Alex Link

但是当将类似的代码放在“index.js”中时，它会抛出“SyntaxError：The requested module does not provide an export named 'default'”错误。 - Sm Srikanth

Answer 2

我使用的导出功能长这样。在React中，它表现良好。

export {default as PublicRoute} from './PublicRoute';
export {default as PrivateRoute} from './PrivateRoute';

然后，您可以在需要的任何地方像这样导入：

import {PublicRoute, PrivateRoute} from './config/router';
...

- Matt Nguyen

---

但我认为@mario的答案更简洁明了，无论如何都是一个好的替代方案 :) - Pardeep Jain

感谢@PardeepJain的支持。我在某些情况下也使用了你的解决方案。我将其应用于我的nodejs服务器代码的构建工具设置中。当我使用我的解决方案时，gulp-strip-debug插件会生成一个意外的令牌错误。我不得不重新使用(@mario)的解决方案，就像你提出的替代方案一样。我的构建工具结果没有被中断 :)！ - Matt Nguyen

Answer 3

你可以使用这个方法。

import * React from 'react'

- Balaji.J.B

Answer 4

一个文件可以有多个命名导出，然后通过用大括号包围来导入特定的导出。导入的模块名称必须与导出的模块名称相同。

import {Something, Somethingelse} from './utility.js'

也可以将所有导出作为以下方式导入：

import * as bundled from './utility.js'

- Abhishek Kumar