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

问题描述

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

I'm working on a react project (my first) and I've recently restructured my folder structure to make a bit more sense.

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

To make my life easier, within my component folders, I have an index.js file which looks like the following:

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

（这个想法是从另一个）

(The idea was lifted from another StackOverflow Question)

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

In this case each of the files this index points to have a singular class export.

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

Now in my main application, I try and do something like:

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

什么都行不通。我发现如果我将它们全部分成直接指向正确文件的单独行，它就可以工作。

Nothing works. I've found that if I separate them all out into individual lines pointing directly at the correct file, it works.

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

所以我可以按照我的方式导入多个类，我只是没有看到它？我是否需要将它们全部命名（ App as App ）？或者这仅仅是强制性限制？

So is it possible to import multiple classes the way I'm doing it, and I'm just not seeing it? Do I perhaps need to name them all (App as App)? Or is this simply an enforced limitation?

推荐答案

您可以像这样导出：

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

export {
    App,
    Home,
    PageWrapper
}

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

Then, you can import like this wherever you need it:

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

...

您可以阅读有关。我也回答了类似的问题，。

You can read more about import and export here. I also answered a similar question here.

这篇关于是否可以使用ES6 / Babel进行多个类导入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！