是否可以使用ES6 / Babel进行多个类导入？

Question

我正在开展一个反应项目（我的第一个），我最近重组了我的文件夹结构，使其更有意义。

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

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

（这个想法来自另一个StackOverflow Question）

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

现在在我的主要应用程序中，我尝试做类似的事情：

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）？或者这只是强制执行的限制？

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

...

您可以在此处详细了解import和export。我也回答了类似的问题here。

Answer 2

我使用看起来像这样的导出。在反应中它运作良好

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

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

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

Answer 3

您可以使用此方法

import * React from 'react'

Answer 4

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

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

一个人还可以按以下方式导入所有导出：

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