Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does ES6 module importing execute the code inside the imported file?

People also ask

What happens when we import in JavaScript?

The imported bindings are called live bindings because they are updated by the module that exported the binding, but cannot be modified by the importing module. In order to use the import declaration in a source file, the file must be interpreted by the runtime as a module.

How do ES6 modules work?

A module is nothing more than a chunk of JavaScript code written in a file. By default, variables and functions of a module are not available for use. Variables and functions within a module should be exported so that they can be accessed from within other files. Modules in ES6 work only in strict mode.

How does ES6 import export work?

With the help of ES6, we can create modules in JavaScript. In a module, there can be classes, functions, variables, and objects as well. To make all these available in another file, we can use export and import. The export and import are the keywords used for exporting and importing one or more members in a module.

Can I use ES6 imports?

Importing can be done in various ways:Node js doesn't support ES6 import directly. If we try to use import for importing modules directly in node js it will throw out the error.


Yes, it does, exactly one time.

See http://www.ecma-international.org/ecma-262/6.0/#sec-abstract-module-records:

Do nothing if this module has already been evaluated. Otherwise, transitively evaluate all module dependences of this module and then evaluate this module


The accepted answer is not fully correct.

A module will execute once when imported, but... it is possible to have multiple copies of a module installed in a project, in which case the code will be executed multiple times!

Consider what happens if a.js, b.js and c.js are in three separate packages (package_a, package_b and package_c respectively) and package_b and package_c both specify package_a as a dependency, and your project specifies package_b and package_c:

node_modules/
├── package_b/
│   └── node_modules/
│       └── package_a/
|           └── a.js
└── package_c/
    └── node_modules/
        └── package_a/
            └── a.js

Because package_a will be installed twice (as far as your project is concerned these are two totally different packages) the code in a.js will be imported, and therefore executed twice!

Many people landing on this question are unlikely to be aware of this quirk of node, yet probably need to be if they landed on this question.

Here is an old but good article on understanding-the-npm-dependency-model with further detail on how and why npm does this.


In case someone is using TypeScript with "module": "es6" and wondering how to do this, use the globalThis keyword:

function outputMsg(msg: string) : void {
    console.log(msg);
}

// export function for global scope
globalThis.outputMsg = outputMsg;

and then call outputMsg("my console output") as usual in the Chrome DevTools console and it should autocomplete and run your function.

You could also rename your "global export":

globalThis.myCrazyFunc = outputMsg;

and call myCrazyFunc("crazy message") in the console.