Question 223312 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How does "import * as bootstrap from '../node_modules/bootstrap' work?

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_modulesbootstrap 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)

Tags:

2

Answers


  1. 0

    import * as bootstrap ... is taking all the exported modules and putting them in bootstrap object

    If you open ./node_modules/bootstrap/dist/js/bootstrap.js, you’d find the export {some_func, some_func_2} which is exporting the intended objects and function.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search