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

Question

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

1. 使用 index.js 文件将所有要导入的组件导出为命名导入。文件夹结构如下，

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 pack 将所有组件捆绑到一个文件中，并将被 npm packed 和 npmpublisheded，看起来有点像这样，

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

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

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

由于组件中没有 index.js，如下所示，

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

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

• 在第二种方法中，路径可能会在某个时刻发生变化，这会导致所有用户发生重大变化。
• 第二种方法中的子模块通常被视为私有(private) API，该软件包的外部使用者不应依赖它们。
• 其他人都按照您在第一种方法中概述的方式进行操作。
• 几个短绒，like TSLint ，当您使用来自外部包的子模块导入时会提示。