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

Answer 2

我碰到了完全相同的问题，对此做了一些研究。

Hackfix

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

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

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

import reactSpinners from 'react-spinners';解析为<root>/node_modules/react-spinners/dist（或node_modules/react-spinners/dist/index.js）
import BarLoader from 'react-spinners/BarLoader'将解析为<root>/node_modules/react-spinners/dist/BarLoader等...

Lodash是怎么做到的？

lodash在自述文件和this thread中也指出：

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

使用lodash-cli生成：

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

但是，他们还提到here，他们希望在Lodash v5中没有两个单独的存储库的情况下进行这项工作...看到他们最终如何做会很有趣！

我本人做了一些实验，但还无法正常工作。例如。我尝试链接到dist文件夹，并在每次构建后将package.json的修改版本复制到该文件夹中，这样就可以开始工作了。但是有时依赖项目会对文件夹变得混乱不满。我敢肯定，这是可行的（基本上将source + dist混合到dist文件夹中），但是它开始感觉像是一个兔子洞，所以我没有继续追求这个路径（还没有）。

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

2 个答案:

Hackfix

Lodash是怎么做到的？