A doubt about the citation between js modules
I, a rookie, recently added some output statements when learning vue-router, to look at the source code as shown below.
index.js and install.js are in the same directory, and install.js is referenced in index.js.
//index.js
console.log("index line 2");
import { install } from "./install"
console.log("index line 4");
//install.js
console.log("install line 3");
//
console.log("install line 56");
as far as I understand it, index line 2 should be printed first, then install line 3 install line 56, and finally index line 4. But execute it in the browser, and the result is as follows. I don"t understand
in order to support the module import of ES6, webpck has its own import/export mechanism. The problem you encounter should be that the
import command caused by webpack's module loading mechanism has a lifting effect, which will be promoted to the head of the whole module
the answers of the two upstairs are added up. This is what the specification requires, and webpack does so
.
javascript modularization development
is a long story, and a complete understanding starts with the inherent lack of modular (module) mechanisms in the javascript language. Let's make a long story short.
at first, before ES6, the community developed a number of module loading schemes, the most important of which were CommonJS and AMD.
then ES6 implements the module function at the language standard level, and the implementation is quite simple, which can completely replace the CommonJS and AMD specifications.
the design idea of the ES6 module
the ES6 design should be static as far as possible, so that the dependency of the module and the variables of input and output can be determined at compile time. The CommonJS and AMD modules, on the other hand, can only determine these things at run time. For example, a CommonJS module is an object, and you must look for object properties when you enter it, basically loading a module as a whole.
while the ES6 module is not an object, but explicitly specifies the output code through the export command, and then enters through the import command. Please remember and understand this sentence carefully.
ES6 can complete module loading at compile time, also known as static loading.
The
import command improves the effect
in response to your doubts, it would be nice to understand the command mechanism of import. The
import command has a lifting effect, which is promoted to the head of the entire module and executed first.
for example, the following way of writing will not report an error, just because of the improvement effect
foo();
import { foo } from 'my_module';
in addition, there are many features brought by static loading modules, such as the inability to use expressions, etc. You can learn
from documents alone.
