导出多个导入组件以提高效率/可读性？

Question

我正在处理一个项目，该项目从特定库进行许多导入，但从

dist

导入而不是更通用。

即。

import {Header} from '@some-lib/.../.../dist/Header';
import {Footer} from '@some-lib/.../.../dist/Footer';
import {Column} from '@some-lib/.../.../dist/Column';
import {Button} from '@some-lib/.../.../dist/Button';
import {Radio} from '@some-lib/.../.../dist/Radio';

而不是

import {Header, Footer, Column, Button, Radio} from '@some-lib';

虽然我知道这样做是为了提高效率并提高我们导入到每个组件中的内容的特异性，但它确实会堵塞顶部一百万个导入的文件，而且看起来并不那么有吸引力。

是否可能有一个单独的文件，我们可以在其中从各自的

dist

位置导入所有库组件并重新导出它们，以便我们可以实现单行导入，但具有以下性能优势：多线？

例如：

// libImportExport.js
import {Header} from '@some-lib/.../.../dist/Header';
import {Footer} from '@some-lib/.../.../dist/Footer';
import {Column} from '@some-lib/.../.../dist/Column';
import {Button} from '@some-lib/.../.../dist/Button';
import {Radio} from '@some-lib/.../.../dist/Radio';

export {Header, Footer, Column, Button, Radio};

// MyComponent.jsx
import {Header, Footer, Column, Button, Radio} from './libImportExport';

...

或者这是毫无意义的努力？

Answer 1

您可以从索引文件重新导出组件。

@some-lib/index.js

import * from "./dist/Header";
import * from "./dist/Footer";
...

然后从依赖中导入它：

import { Header, Footer } from "@some-lib";