允许在 npm 模块中直接导入文件，如 lodash

Question

Lodash 允许导入

import merge from 'lodash/merge';

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

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';？也许代码可读性？