多重导入 ES6

Question

I have next situation - i'm using library material-ui; And don't want each time use straight way to node_modules for importing required me component '@material-ui/core/Tabs' . I decided to use proxy-file which import all component and then export them for use more comfortable use import MU componentns import - something line import Button from 'components/Button' . I would love to use flexible import from array list. Example code:

<code>
const materialComponents = [
  Button
];

materialComponents.forEach(item=>{
  import item from `@material-ui/core/${item}`
});


export default {
  ...materialComponents
}
</code>

So...I have problem with import item from @material-ui/core/${item} Compiler says that i need use string for route.

How can i resolve this problem?

Thanks.

Answer 1

If I understand your goal correctly, you can achieve the same thing without an additional file.

Either:

import { Button, Card, Icon } from '@material-ui/core'

And then use the components as usual, or use the 'import as' syntax to import all components under a common namespace, ie:

import * as components from '@material-ui/core'

You can then use the imported components by invoking <components.Button> etc.