将组件组合到一个库中

Question

我正在为我的本机项目创建一个UI库。 组件被分成自己的文件，如：Button，TextBox，Panel等

所以，当我想使用它时，我会这样做：

import Button from '../UI/button';
import TextBox from '../UI/textBox';

但是我怎样才能实现以下调用呢？不需要为每个特定组件执行导入语句。

import { Button,TextBox, SomeOtherComp } from '../UI/??';

当我想使用多个组件时，这会节省大量的输入...

Answer 1

创建名为index.js

的文件

此文件的目的是简单地公开库中的所有可用组件

import Button from './button';
import TextBox from './textBox';
...

module.exports = {
  Button,
  TextBox,
  ...
};

在使用UI库的代码中，您现在可以导入如下组件：

import { Button, TextBox, SomeOtherComp } from '../UI';

导入文件夹名称时，软件包将查找index.js文件并导入该文件。

Answer 2

可以直接重新导出模块，而无需编写重复的导入和导出代码：

// UI.js

export { default as Button } from './button';
export { default as TextBox } from './textBox';

用法：

import { Button, TextBox } from './UI';