reactjs - 允许直接导入 npm 模块中的文件，例如 lodash

Question

Lodash 允许像这样导入

import merge from 'lodash/merge';

这大大减少了导入的大小。我维护一个名为 react-spinners 的 npm 模块，并且我希望允许相同的导入。

https://github.com/davidhu2000/react-spinners

例如当前导入的方式是

import { BarLoader } from 'react-spinners';

我想允许

import BarLoader from 'react-spinners/BarLoader';

根据我的发现，要做到这一点，我需要具有以下文件夹结构

main
  - index.js <- the file that exports everything
  - BarLoader.js
  - ... other loaders

这个结构相当困惑，因为所有的js文件都在根目录中。

我当前的设置是

main
  - index.js
  - dist <- output folder from compiling
    - index.js
    - BarLoader.js
  - src <- uncompiled react code
    - index.js
    - BarLoader.js

因此，目前，要仅导入单个加载程序

import BarLoader from 'react-spinners/dist/BarLoader';

我找不到任何信息告诉我如何从上述语句中删除 dist 。

Answer 1

如果你真的想搞乱 npm-package 你可以创建一个像BarLoader.js 位于主包文件夹中，仅导出 BarLoader(就像 index.js 导出所有项目)

然后你可以通过导入它

import BarLoader from 'react-spinners/BarLoader';

但我不会推荐它，因为为每次导入创建一个文件将是一项乏味的任务我想这是一个公平的问题，import BarLoader from 'react-spinners/dist/BarLoader'; 有什么问题吗？也许代码可读性？