允许直接导入npm模块中的文件，如送交

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包，您可以在主包文件夹上创建一个类似BarLoader.js的文件，并且只导出BarLoader(就像index.js导出所有项目一样)。

然后您就可以通过

import BarLoader from 'react-spinners/BarLoader';

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

Answer 2

我也遇到了同样的问题，并对此做了一些研究。

哈克费克斯

使用Webpack，可以使用config.resolve.alias，如下所示：

const webpackCfg = {
  // ...
  resolve: {
    alias: {
     'react-spinners': path.resolve(__dirname, 'node_modules/react-spinners/dist')
    }
  }
  // ...
};

这样，所有文件都将直接在dist文件夹中查找。

1. import reactSpinners from 'react-spinners';解析为<root>/node_modules/react-spinners/dist (或node_modules/react-spinners/dist/index.js)
2. import BarLoader from 'react-spinners/BarLoader'会解决<root>/node_modules/react-spinners/dist/BarLoader等..。

洛达什是怎么做到的？

正如房客在他们的自述和这条线中所指出的

Lodash存储库不是纯源代码，而是“作为UMD模块导出的Lodash”。他们进一步解释：

使用生成：

$ npm run build
$ lodash -o ./dist/lodash.js
$ lodash core -o ./dist/lodash.core.js

但是，他们也提到了这里，他们希望在没有Lodash v5中的两个单独的存储库的情况下完成这项工作。看看他们是怎么做的会很有趣的！

我自己做了一些实验，但我还不能让它发挥作用。例如，我试图链接到dist文件夹，并在每次构建后将修改后的package.json版本复制到其中，这就开始起作用了。但有时，依赖项目会对文件夹开始变得混乱感到不快。我确信，这是可行的(基本上将source + dist混合到dist文件夹中)，但它开始感觉就像一个兔子洞，所以我还没有继续追求这条路径(相当)。