Question

我正在实现一个组件库（一个npm模块，我们称之为awesome-components），它由按钮，输入，下拉菜单等组成，最终用户可以在其中将其安装在他们的react应用中并使用这些组件。我的困惑是为最终用户打包此库的最佳方法是什么？我想到了两种方法，

src
  |-components
    |-Button
      |-index.jsx
    |-Input
      |-index.jsx
    |-index.js

index.js的实现方式如下，

import Button from "./Button";
import Input from "./Input";

export { Button, Input };

包json的main将指向组件根目录中的index.js。 npm包会将所有组件捆绑到一个文件中，并将分别进行npm pack和npm published修订，

dist
  |-index.js
  |-index.js.map
  |-package.json

最终用户可以按以下方式在他们的应用程序中导入这些组件，

import { Button, Input } from "awesome-components";

src
  |-components
    |-Button
      |-index.jsx
    |-Input
      |-index.jsx

然后分别捆绑组件并将其运送给最终用户，以保留看起来像这样的文件夹结构，

dist
  |-components
    |-Button
      |-index.js
      |-index.js.map
    |-Input
      |-index.js
      |-index.js.map

最终用户可以按照以下绝对路径使用这些componenet，

import Button from "awesome-library/Button";
import Input from "awesoem-library/Input";

我担心的是，哪种方法将使最终用户受益？组件的数量甚至可以增加到20。使用可伸缩性和性能的最佳方法是什么？

非常感谢：）

Answer 1

您的第一种方法较为可取，原因有四个。