鍍金池/ 問答/HTML/ js模塊間引用的一處疑惑

js模塊間引用的一處疑惑

本人小白，最近在學(xué)習(xí) vue-router，看源碼的時候加了些輸出語句如下所示。
index.js 和 install.js 在同一個目錄下，index.js 中引用 install.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');

按照我的理解，應(yīng)該是最先打印index line 2，然后打印install line 3，install line 56，最后打印index line 4。但是在瀏覽器里執(zhí)行，結(jié)果如下所示。搞不懂
圖片描述

回答
編輯回答
薄荷綠

javascript模塊化發(fā)展
這個問題說來話長，完整了解需要從javascript這門語言天生缺少模塊（module）化機(jī)制說起。下面長話短說.

最早，在ES6之前，社區(qū)制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。
然后ES6 在語言標(biāo)準(zhǔn)的層面上，實現(xiàn)了模塊功能，而且實現(xiàn)得相當(dāng)簡單，完全可以取代 CommonJS 和 AMD 規(guī)范。

ES6 模塊的設(shè)計思想
ES6設(shè)計盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。而CommonJS 和 AMD 模塊，都只能在運(yùn)行時確定這些東西。比如，CommonJS 模塊就是對象，輸入時必須查找對象屬性，基本上是整體加載一個模塊。
而ES6模塊不是對象，而是通過export命令顯式指定輸出的代碼，再通過import命令輸入，請認(rèn)真記住并好好理解這句話。
ES6 可以在編譯時就完成模塊加載，也稱為靜態(tài)加載。

import命令提升效果
針對你的疑惑，其實了解一下import的命令機(jī)制就好了。
import命令具有提升效果，會提升到整個模塊的頭部，首先執(zhí)行。
比如，下面的寫法并不會報錯，就是因為提升效果

foo();
import { foo } from 'my_module';

而除此之外，還有很多靜態(tài)加載模塊帶來的一些特性，比如不能使用表達(dá)式等，可以單靠文檔學(xué)習(xí)

2018年6月14日 14:42
編輯回答
陌上花

import命令具有提升效果，會提升到整個模塊的頭部

2018年2月17日 07:04
編輯回答
朕略傻

為了支持ES6的模塊導(dǎo)入, webpck 自己有一套 import/export 機(jī)制, 你遇到的這種問題,應(yīng)該是 webpack 的模塊加載機(jī)制引發(fā)的

2018年9月9日 13:25
編輯回答
心癌

樓上兩位回答加起來就是了， 規(guī)范這么要求，webpack就這么做了

2017年7月23日 22:21