ES6 import的優先級很高，所有的依賴模塊都會在模塊代碼執行之前加載
### 語法
~~~
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name");
~~~
### **1）導入整個模塊的內容**
這將`myModule`插入當前作用域，其中包含來自位于`/modules/my-module.js`文件中導出的所有模塊。
~~~js
import * as myModule from '/modules/my-module.js';
~~~
在這里，訪問導出意味著使用模塊名稱（在這種情況下為“myModule”）作為命名空間。例如，如果上面導入的模塊包含一個`doAllTheAmazingThings()`，你可以這樣調用：
~~~js
myModule.doAllTheAmazingThings();
~~~
### ** 2）導入單個導出**
給定一個名為`myExport`的對象或值，它已經從模塊`my-module`導出（因為整個模塊被導出）或顯式地導出（使用[`export`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export "有兩種不同的導出方式，每種方式對應于上述的一種語法：")語句），將`myExport`插入當前作用域。
~~~js
import {myExport} from '/modules/my-module.js';
~~~
### 3）導入多個導出
這將`foo`和`bar`插入當前作用域。
~~~js
import {foo, bar} from '/modules/my-module.js';
~~~
### 4）導入帶有別名的導出
導入時可以重命名導出。例如，將`shortName`插入當前作用域。
~~~js
import {reallyReallyLongModuleExportName as shortName}
from '/modules/my-module.js';
~~~
### 5）導入時重命名多個導出
使用別名導入模塊的多個導出。
~~~js
import {
reallyReallyLongModuleMemberName as shortName,
anotherLongModuleName as short
} from '/modules/my-module.js';
~~~
### 6）僅為副作用而導入一個模塊
模塊僅為副作用（中性詞，無貶義含義）而導入，而不導入模塊中的任何內容。 這將運行模塊中的全局代碼, 但實際上不導入任何值。
~~~
import '/modules/my-module.js';
~~~
### 7）導入默認值
在`default`[`export`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export "有兩種不同的導出方式，每種方式對應于上述的一種語法：")（無論是對象，函數，類等）有效時可用。然后可以使用`import`語句來導入這樣的默認值。
~~~js
import myDefault from '/modules/my-module.js';
~~~
也可以同時將`default`語法與上述用法（命名空間導入或命名導入）一起使用。在這種情況下，`default`導入必須首先聲明。 例如：
~~~js
import myDefault, * as myModule from '/modules/my-module.js';
// myModule used as a namespace
~~~
或者
~~~js
import myDefault, {foo, bar} from '/modules/my-module.js';
// specific, named imports
~~~
~~~js
//聲明
function getJSON(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
callback(this.responseText)
};
xhr.open('GET', url, true);
xhr.send();
}
export function getUsefulContents(url, callback) {
getJSON(url, data => callback(JSON.parse(data)));
}
//導入
import { getUsefulContents } from '/modules/file.js';
getUsefulContents('http://www.example.com',
data => { doSomethingUseful(data); });
~~~
學習鏈接
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
