一篇文章弄懂 JavaScript 中的 import

import 語句用於導入由另外一個模塊導出的綁定。不管是否聲明瞭 strict mode，導入的模塊都運行在嚴格模式下。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 { export1, export2 as alias2 , [...] } from 「module-name」;
import defaultExport, { export [ , [...] ] } from 「module-name」;
import defaultExport, * as name from 「module-name」;
import 「module-name」;
複製代碼

defaultExport

將引用模塊默認導出的名稱。

module-name

要導入的模塊。這一般是包含模塊的 .js 文件的相對或絕對路徑名，能夠不包括 .js 擴展名。某些打包工具能夠容許或要求使用該擴展；檢查你的運行環境，只容許單引號和雙引號的字符串。

name

引用時將用做一種命名空間的模塊對象的名稱。

export，exportN

要導入的導出名稱

alias，aliasN

將引用指定的導入的名稱。

描述

name 參數是「模塊對象」的名稱，它將用一種名稱空間來引用導出。導出參數指定單個命名導出，而import * as name 語法導入全部導出。

導入整個模塊的內容

這將 myModule 插入當前做用域，其中包含來自位於 /modules/my-module.js 文件導出的全部模塊。

import * as myModule from ‘/modules/my-module.js’;
複製代碼

在這裏，訪問導出意味着使用模塊名稱（在這種狀況下爲」myModule」）做爲命名空間。例如，若是上面導入的模塊包含一個doAllTheAmazingThings()，你能夠這樣調用：

myModule.doAllTheAmazingThings();
複製代碼

導入單個導出

給定一個名爲 myExport 的對象或值，它已經從模塊 my-module 導出（由於整個模塊被導出）或顯式導出（使用 export 語句），將 myExport 插入到當前做用域。

import { myExport } from ‘/modules/my-module.js’;
複製代碼

導入多個導出

將 foo 和 bar 插入當前做用域。

import { foo, bar } from ‘/modules/my-module.js’;
複製代碼

導入帶有別名的導出

導入時能夠重命名導出，例如，將shortName 插入當前做用域。

import { reallyReallyReallyLongModuleExportName as shortName } from 「/modules/my-module.js」;
複製代碼

導入時重命名多個導出

使用別名導入模塊的多個導出。

import {
    reallyReallyReallyLongModuleMemberName as shortName,
    anotherLongModuleName as short
} form 「/modules/my-module.js」;
複製代碼

僅爲反作用而導入一個模塊

模塊僅爲反作用（中性詞、無貶義含義）而導入，而不是導入模塊中的任何內容，這將運行模塊中的全局代碼，但實際上不導入任何值。

import 「/modules/my-module.js」
複製代碼

導入默認值

在 default-export （不管是對象、函數、類等）有效時可用。而後能夠使用 import 語句來導入這樣的默認值。 最簡單的用法是直接導入默認值：

import myDefault from 「/modules/my-module.js」;
複製代碼

也能夠同時將 default 語法與上述用法（命名空間導入和命名導入）一塊兒使用。在這種狀況下，default 導入必須首先聲明。

import myDefault, * as myModule from 「/modules/my-module.js」;
複製代碼

或者

import myDefault, { foo, bar } from 「/modules/my-module.js」;
複製代碼

示例

從輔助模塊導入以協助處理 AJAX DSON 請求。

模塊：file.js

function getJSON(url, callback){
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
        callback(this.responseText)
    };
    xhr.open(‘GET’, url, true);
    xhr.send();
}
export function getUserFulContents(url, callback){
    getJSON(url, data => callback(JSON.parse(data)));
}
複製代碼

主程序：main.js

import { getUserFulContents } from 「/modules/file.js」;
getUserFulContents(‘http://www.example.com」, 
    data => { doSomethingUseful(data); } )
複製代碼

補充

strict mode 嚴格模式 嵌入式腳本