Difference between lib and es folder

Question

I just want to clear my concepts? I'm using a npm package named reactstrap which is installed on node_modules folder. The package contains 4 folders.

• dist
• es
• lib
• src

I know src folder contains the source code of the library but what is the difference between other these 3 folders.

What if I write something like this to import a component.

import {Button} from 'reactstrap';

The above line is using ES6 module syntax to import a component.

Does this Button component is came from the es folder or lib folder?

What will be the syntax if I want to import the Button component by using commonJS module pattern?

Answer 1

When use import/require an package without specify an filepath, npm will use main file that was specify in package.json (reactstrap package.json). it's same for es and commonJS style.

'es', 'dist', 'lib',... is just folders that was built by different options, so it's just an optional for each project with specific usecase. You can see build option for each type here.

As you can see, dist folder was created by rollup, it let this package runable on browser, es module and commonJs module. And lib folder was created by babel