Es6 import as read-only view

Question

There is no detailed explanation of what exactly imports and exports es6 under the hood. Someone describes import as read-only viewing. Check out the code below:

// lib/counter.js export let counter = 1; export function increment() { counter++; } export function decrement() { counter--; } // src/main.js import * as counter from '../../counter'; console.log(counter.counter); // 1 counter.increment(); console..log(counter.counter); // 2 

My question is: if two modules import the same counter module and the first module increments the counter, will the second module also see the counter as incremented? What to do with the hood "import" and "export"? In what context is the increment function performed? What is an increment function variable object?

 // lib/counter.js export let counter = 1; export function increment() { counter++; } export function decrement() { counter--; } // src/main1.js import * as counter from '../../counter'; console.log(counter.counter); // 1 counter.increment(); console..log(counter.counter); // 2 // src/main2.js import * as counter from '../../counter'; console.log(counter.counter); // what is the result of this, 1 or 2? 

It seems to me that the “export” creates a global object that various modules can access, and it sets the context of the exported function for this object. If so, the design is related to me because the modules do not know what other modules do. If two modules import the same module (counter), one module calls the increment function (example above), which cause a change in value (counter), the other module does not know this.

Answer 1

The answer depends on what your input module is. For example, if you define an input module as:

 // index.js import "./main1"; import "./main2"; 

Then output:

 1 // from main1 2 // from main1 2 // from main2 

ES6 modules accept a hold state, but are not allowed to directly control the states of other modules. The module itself can set a modifier function (for example, your increment method).

If you want to experiment a bit, rollupjs has a nice online demo that shows how standard import and export should work.

Answer 2

See section 16.3.5 here

As already mentioned:

Importing an ES6 module is read-only for exported objects. This means that connections to variables declared inside module modules remain in real time, as shown in the following code.

 //------ lib.js ------ export let counter = 3; export function incCounter() { counter++; } //------ main.js ------ import { counter, incCounter } from './lib'; // The imported value `counter` is live console.log(counter); // 3 incCounter(); console.log(counter); // 4 

How this works under the hood is explained in the next section .

Importing as views has the following advantages:

• They allow you to use circular dependencies even for unskilled imports.
• Skilled and unskilled imports work the same way (they are both indirections).
• You can split the code into several modules and it will continue to work (until you try to change the import values).