Near the top of my app.js file, I have the line
import * as bootstrap from '../../node_modules/bootstrap';
If I console.log(bootstrap) on the next line, then I can see that the bootstrap variable does indeed hold a bootstrap-looking object with all the properties I'd expect.
The question is though, how does this work, because node_modules\bootstrap is just a directory
|- node_modules
|-> bootstrap
|-> dist [dir]
|-> js [dir]
|-> scss [dir]
|-> LICENCE [txt file]
|-> package.json
|-> README.md
So how exactly does it work out what needs to be imported into the bootstrap variable?
It's more curiosity as to how this works really, because it does work correctly.
EDIT: (directory structure was edited since original post)
How import looks for a particular file depends on the environment. But if you use node or a common bundler like webpack, rollup, or vite, then those use the package.json file in the module that you import/require to figure out which file is the entry point.
In the case of bootstrap, you have the following lines in package.json
"main": "dist/js/bootstrap.js",
"module": "dist/js/bootstrap.esm.js",
(These lines might vary, I have taken those from GitHub)
This means that it will load the file listed at main in case require('boostrap') is used or at module if you do import * as bootstrap from 'boostrap'. In those files, you could see what is exported.
There could even be more entires that e.g. differentiate between node and browser and could have additional aliases.