使用绝对路径命名导出/导入与导入

Question

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

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 packed和npm publisheded，看起来有点像这样，

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

最终用户可以使用绝对路径使用这些组件，如下所示，

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

我担心的是，哪种方法会使最终用户受益？组件数量甚至可以增长到20个。在可扩展性和性能方面，最好的方法是什么？

非常感谢：）

Answer 1

出于四个主要原因，您的第一种方法更可取。