目前基于webpack、rollup等構建工具進行開發，模塊化已經是常態，基本的import、export操作少不了，這里對常用的一些方法做一下總結。

ES6模塊只支持靜態導出，你只可以在模塊的最外層作用域使用export，不可在條件語句中使用，也不能在函數作用域中使用。

exports的幾種用法

1. Named exports (導出每個 函數/變量)

名字導出，這種方式導出多個函數，一般使用場景比如 utils、tools、common 之類的工具類函數集，或者全站統一變量等。

只需要在變量或函數前面加 `export` 關鍵字即可。

//------ lib.js ------ export const sqrt = Math.sqrt; export function square(x) {return x * x; } export function diag(x, y) {return sqrt(square(x) + square(y)); }//------ main.js 使用方式1 ------ import { square, diag } from 'lib'; console.log(square(11)); // 121 console.log(diag(4, 3)); // 5//------ main.js 使用方式2 ------ import * as lib from 'lib'; console.log(lib.square(11)); // 121 console.log(lib.diag(4, 3)); // 5

我們也可以直接導出一個列表，例如上面的lib.js可以改寫成：

//------ lib.js ------ const sqrt = Math.sqrt; function square(x) {return x * x; } function add (x, y) {return x + y; } export {sqrt, square, add}

2. Default exports (導出一個默認 函數/類)

這種方式比較簡單，一般用于一個類文件，或者功能比較單一的函數文件使用。一個模塊中只能有一個export default默認輸出。

export default與export的主要區別有2個：

• 不需要知道導出的具體變量名
• 導入(import)時不需要{}

//------ myFunc.js ------ export default function () { ... };//------ main.js ------ import myFunc from 'myFunc'; myFunc();

導出一個類

//------ MyClass.js ------ class MyClass{constructor() {} } export default MyClass;//------ Main.js ------ import MyClass from 'MyClass';

注意這里默認導出不需要用{}。

3. Mixed exports (混合導出)

混合導出，也就是 上面第一點和第二點結合在一起的情況。比較常見的比如 Lodash，阿里 Fusion之類的庫都是這種組合方式。

//------ lib.js ------ export var myVar = ...; export let myVar = ...; export const MY_CONST = ...;export function myFunc() {... } export function* myGeneratorFunc() {... } export default class MyClass {... }// ------ main.js ------ import MyClass, {myFunc} from 'lib';

再比如lodash例子：

//------ lodash.js ------ export default function (obj) {... }; export function each(obj, iterator, context) {... } export { each as forEach };//------ main.js ------ import _, { each } from 'lodash';

4. Re-exporting (別名導出)

一般情況下，export輸出的變量就是在原文件中定義的名字，但也可以用 as 關鍵字來指定別名，這樣做一般是為了簡化或者語義化export的函數名。

//------ lib.js ------ export function getUserName(){... }; export function setName(){... };//輸出別名，在import的時候可以同時使用原始函數名和別名 export {getName as get, //允許使用不同名字輸出兩次getName as getNameV2,setName as set }

5. Module Redirects (中轉模塊導出)

有時候為了避免上層模塊導入太多的模塊，我們可能使用底層模塊作為中轉，直接導出另一個模塊的內容如下：

//------ myFunc.js ------ export default function() {...};//------ lib.js ------ export * from 'myFunc'; export function each() {...};//------ main.js ------ import myFunc,{ each } from 'lib';

錯誤的export用法

export 只支持在最外層靜態導出、只支持導出變量、函數、類，如下的幾種用法都是錯誤的。

//直接輸出變量的值 export 'Mark';//未使用中括號 或 未加default // 當只有一個導出數，需加default，或者使用中括號 var name = 'Mark'; export name;//export不要輸出塊作用域內的變量 function(){var name = 'Mark';export {name}; }

import的幾種用法

import的用法和export是一一對應的，但是import支持靜態導入和動態導入兩種方式，動態import支持晚一些，兼容性要差一些，目前Chrome瀏覽器和Safari瀏覽器支持。

1. Import an entire module's contents (導入整個模塊)

當export有多個函數或變量時，如文中export的第一點，可以使用 * as 關鍵字來導出所有函數及變量，同時 as 后面跟著的名稱做為 該模塊的命名空間。

//導出lib的所有函數及變量 import * as lib from 'lib';//以 lib 做為命名空間進行調用，類似于object的方式 console.log(lib.square(11)); // 121

2. Import a single/multiple export from a module

從模塊文件中導入單個或多個函數，與 * as namepage 方式不同，這個是按需導入。如下例子:

//導入square和 diag 兩個函數 import {square, diag} from 'lib';// 只導入square 一個函數 import {square} from 'lib';// 導入默認模塊 import _ from 'lodash';// 導入默認模塊和單個函數，這樣做主要是簡化單個函數的調用 import _, { each } from 'lodash';

3. Rename multiple exports during import

和 export 一樣，也可以用 as 關鍵字來設置別名，當import的2個類的名字一樣時，可以使用 as 來重設導入模塊的名字，也可以用as 來簡化名稱。如下例子：

// 用as 來 簡化函數名稱 import {reallyReallyLongModuleExportName as shortName,anotherLongModuleName as short } from '/modules/my-module.js';// 避免重名 import { lib as UserLib} from "ulib"; import { lib as GlobalLib } from "glib";

4. Import a module for its side effects only

有時候我們只想import進來，不需要調用，很常見的，比如在webpack構建時，我們經常import css 進來，或者import一個類庫進來。

// 導入css import './mystyle.css';// 導入類庫 import 'axios';

5. Dynamic Imports

靜態import在首次加載時候會把全部模塊資源都下載下來，但是，我們實際開發時候，有時候需要動態import（dynamic import），例如點擊某個選項卡，才去加載某些新的模塊，這個動態import特性瀏覽器也是支持的。

// 當動態import時，返回的是一個promise import('/modules/my-module.js').then((module) => {// Do something with the module.});// 上面這句實際等同于 let module = await import('/modules/my-module.js');

es7的新用法：

async function main() {const myModule = await import('./myModule.js');const {export1, export2} = await import('./myModule.js');const [module1, module2, module3] =await Promise.all([import('./module1.js'),import('./module2.js'),import('./module3.js'),]); } main();

參考資料：

• https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
• http://2ality.com/2014/09/es6-modules-final.html
• https://hackernoon.com/import-export-default-require-commandjs-javascript-nodejs-es6-vs-cheatsheet-different-tutorial-example-5a321738b50f

超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的import 别名_es6模块 import, export 知识点小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。