Allow direct import of files within npm module like lodash

Question

Lodash allows import like

import merge from 'lodash/merge';

This reduces the size of the import drastically. I maintain an npm module called react-spinners, and I want to allow the same import.

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

For example, the current way to import is

import { BarLoader } from 'react-spinners';

I want to allow

import BarLoader from 'react-spinners/BarLoader';

Based on what I found, to do this, I need to have the following folder structure

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

This structure is pretty messy because all the js files will be in the root directory.

The current set up I have is

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

So, currently, in order to import only a single loader is

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

I cannot find anything that tells me how I can remove the dist from the above statement.

Answer 1

If you really want to mess with the npm-package You can create a file like BarLoader.js on the main package folder and only export BarLoader(just like index.js exports every items)

Then you can import it via

import BarLoader from 'react-spinners/BarLoader';

But I would not recommend it as it would be a tedious task to create one file for each import I guess it is a fair question, What is wrong with import BarLoader from 'react-spinners/dist/BarLoader';? maybe code readability?

Answer 2

I ran into the exact same issue, and did a bit of research on this.

Hackfix

Using Webpack, you can use config.resolve.alias, like so:

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

This way all files will be directly looked for in the dist folder.

1. import reactSpinners from 'react-spinners'; resolves to <root>/node_modules/react-spinners/dist (or node_modules/react-spinners/dist/index.js)
2. import BarLoader from 'react-spinners/BarLoader' will resolve to <root>/node_modules/react-spinners/dist/BarLoader etc...

How does Lodash do it?

As lodash points out in their README and also in this thread:

The Lodash github repository is not the pure source code, but rather "Lodash exported as a UMD module". They go further to explain:

Generated using lodash-cli:

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

However, they also mention here that they want to make this work without having two separate repositories in Lodash v5... Gonna be interesting to see how they end up doing it!

I myself did some experiments, and I could not get it to work quite yet. E.g. I tried to link to the dist folder and copy a modified version of the package.json into it after every build, and that kinda starts working. But sometimes the depending project will be unhappy about folders starting to get messed up. I'm sure, this can work (basically mixing source + dist into the dist folder) but it started to feel like a rabbit hole, so I have not continued pursuing this path (quite yet).