What is the functionality behind utilizing "import * as bootstrap from '../node_modules/bootstrap"?

At the beginning of my app.js file, I include the line

import * as bootstrap from '../../node_modules/bootstrap';

After calling console.log(bootstrap) on the following line, I can confirm that the bootstrap variable contains an object resembling Bootstrap with all the expected properties.

The mystery lies in how this works, considering that node_modules\bootstrap is simply a directory.

|- node_modules
    |-> bootstrap
        |-> dist [dir]
        |-> js [dir]
        |-> scss [dir]
        |-> LICENCE [txt file]
        |-> package.json
        |-> README.md

So, how does the system determine what to import into the bootstrap variable?

This question stems from curiosity about the inner workings of this process, as it undeniably functions correctly.

EDIT: (directory structure was modified after the original post)

javascriptnpmjavascript-import

Answer №1

The method by which import locates a specific file varies depending on the environment. When using node or popular bundlers like webpack, rollup, or vite, these tools reference the package.json file in the imported module to determine the main entry point file.

For example, in the case of bootstrap, the package.json contains the following lines:

  "main": "dist/js/bootstrap.js",
  "module": "dist/js/bootstrap.esm.js",

(These lines may vary, the ones mentioned here are taken from GitHub)

This setup means that the file specified at main will be loaded when using require('bootstrap'), and the file specified at module will be loaded when using 

import * as bootstrap from 'bootstrap'
. These files will contain the exported content.

There could also be additional entries that differentiate between node and browser, as well as extra aliases.

Answer №2

import * as bootstrap ... is gathering all the modules that are being exported and placing them within the bootstrap object

Upon opening the file 

./node_modules/bootstrap/dist/js/bootstrap.js
, you will come across the export {some_func, some_func_2} statement, which is responsible for exporting the desired objects and functions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to retrieve Firebase values, but not able to access them?

I'm facing an unusual issue where pushing a value to a Firebase object leads to two unexpected outcomes: I am unable to retrieve it from the array when pulling the object from Firebase. The array I receive does not have a length property. Let' ...

javascriptarraysreactjsfirebasereact-native

How can I show tab objects in a Chrome extension?

I'm currently working on developing a new Google Chrome extension that focuses on tab organization. Despite the abundance of similar extensions already available, I am determined to create my own unique solution. One idea I have is to create a popup w ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Display a collection of pictures from a directory on a website using JavaScript

I am having trouble displaying a collection of images from a specific folder using JavaScript/jQuery. Below is the code snippet I am working with: $(document).ready(function(){ var dir = "images/"; // specified folder location var fileextension ...

javascriptjquery

Having difficulty generating a footer for a page that includes a Material-UI Drawer component

Looking to create a standard full-width footer at the bottom of my page, I need help with the implementation. Utilizing the "Permanent drawer" from Material-UI Drawer for reference here. If you're interested in experimenting with it, CodeSandbox link ...

javascriptcssreactjsmaterial-uinavigation-drawer

Endless cycle within the while loop without any obvious cause

I've been tinkering with a timer and thanks to some feedback I received in this community, everything is running smoothly. Here's what the current version looks like for reference: https://i.stack.imgur.com/Qd7ll.png Here's a snippet of my ...

javascriptjqueryhtmlwhile-loopinfinite-loop

Having trouble adding items to an array within a Javascript promise

I am facing an issue with the exported function in a Nextjs app, which acts as an API page. The problem arises when the 'domainnames' array returns nothing in the 200 response. Interestingly, if I exclude the 'GetDomainStatus()' funct ...

javascriptnext.jses6-promisejavascript-scope

Accessing the app module in separate files is not possible for Angular and Coffeescript

As I work on managing and refactoring my Angular code in a Rails project with CoffeeScript, I am facing issues accessing Angular objects between multiple files. Here is the current file structure: javascripts |-Angular |-controllers | |-search_strl.js ...

javascriptruby-on-railsangularjscoffeescript

Resetting the caret position in a React Native TextInput occurs when switching the secureTextEntry prop

As I develop a component to wrap the React Native TextInput in my app, I encounter an issue with the caret position resetting to 0 when toggling the secureTextEntry prop for password visibility. To address this problem, I implemented a workaround using a s ...

javascriptreactjsreact-native

What is the fastest way to remove the node_modules directory?

Is there a quicker way to delete the node_modules folder on Windows Explorer? It seems to take forever whenever I try to remove it. ...

node.jsnpmcommand-linenode-modules

Tips on handling a JSON string alert

Can someone guide me on how to extract a specific value from a JSON string I received in an alert message? The JSON string looks like this: {"Error":true, "data":["not available","somethinghere"]} The JSON string is obtained from an alert using the follow ...

javascripthtmljson

Using JSON Object for Default Selection in an Angular Dropdown Menu

Here is some code I have that fills in a specific select item on a webpage: <select ng-model="activity.selectedParent" ng-options="parent as parent.title for parent in parents track by parent._id"></select><br> I'm curious if there ...

javascriptangularjsjson

Comparison underperforming when filtering is implemented on negative numbers with three digits

When the $filter function is used on a negative number with three or more digits, the less than comparison operator does not work correctly. var num = -1500; num = $filter('number')(num, 0); if (num <= 15) { console.log("working"); } ...

javascriptangularjs

Generate charts with DC using Node.js and pre-render them

Attempting to utilize dc.js for chart prerendering with npm has proven challenging. Upon incorporating dc into the code, errors are thrown. As a novice in node.js, attempts to troubleshoot by searching for solutions have been fruitless. It is suspected th ...

node.jsd3.jsnpmdc.jscrossfilter

Exploring the ins and outs of HTML event handlers with JavaScript

When using events in your HTML and including a small amount of JavaScript, what is this called? Is it referred to as a "JavaScript attribute function," simply a "JavaScript attribute," or something else entirely? For example: <button onClick="locat ...

javascripthtmldom-events

Exporting data from AngularJS to Excel is not functioning correctly in Internet Explorer. Additionally, the exported Excel file does not display properly in Firefox and

I have been attempting to Export a table from a jsp page to Excel using AngularJs. Is Angularjs not compatible with IE? I am also encountering this error SCRIPT5009: 'Node' is undefined In Chrome and Firefox, the Excel file only opens when save ...

javascripthtmlangularjsexceljsp

Passing hooks down in React leads to input losing focus due to rerendering

I have a parent component where I initialize some state, and then pass it down to the child components for updating. Unfortunately, when the update occurs, the component tree is re-rendered causing my inputs to lose focus. Even adding a `key` did not resol ...

javascriptreactjsreact-hooks

FixPermissions not working properly | Discord.js EXPERT

I am currently in the process of updating my bot to be compatible with the latest version of discord.js. I have successfully made various changes, but I am facing an issue with the overwritePermissions section within my ticket command. For some reason, the ...

javascriptnode.jsdiscord.js

Transferring information between Vue.js components via data emissions

Greetings from my VueJS Table component! <b-table class="table table-striped" id="my-table" :items="items" :per-page="perPage" :current-page="currentPage" :fields="fields" @row-clicked="test" lg >< ...

javascriptvue.js

What is the process for defining a global variable within a module in Typescript?

I've already included a global value in my global JavaScript context: const fs = require('fs') For a specific reason, I need to include it in the global scope. Now, I want to create a .d.ts file to declare the global variable with a stron ...

javascripttypescriptelectrontypescript-typings

Switching ng-Idle countdown time from seconds to minutes is possible by adjusting the configuration settings

I have implemented ng-idle in my application, where the warning popup appears after 10 seconds with the message: "Your session will be close in 10 seconds" However, I need to change this to minutes. The session should be closed in 5 minutes instead. How ...

javascripthtmlcssangularjs