在創(chuàng)建 JAVAScript 模塊時，export 語句用于從模塊中導(dǎo)出實時綁定的函數(shù)、對象或原始值，以便其他程序可以通過 import 語句使用它們。被導(dǎo)出的綁定值依然可以在本地進行修改。在使用 import 進行導(dǎo)入時，這些綁定值只能被導(dǎo)入模塊所讀取，但在 export 導(dǎo)出模塊中對這些綁定值進行修改，所修改的值也會實時地更新。

無論您是否聲明，導(dǎo)出的模塊都處于嚴格模式。 export 語句不能用在嵌入式腳本中。

語法

存在兩種 exports 導(dǎo)出方式：

1. 命名導(dǎo)出（每個模塊包含任意數(shù)量）
2. 默認導(dǎo)出（每個模塊包含一個）

// 導(dǎo)出單個特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// 導(dǎo)出列表
export { name1, name2, …, nameN };

// 重命名導(dǎo)出
export { variable1 as name1, variable2 as name2, …, nameN };

// 解構(gòu)導(dǎo)出并重命名
export const { name1, name2: bar } = o;

// 默認導(dǎo)出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// 導(dǎo)出模塊合集
export * from …; // does not set the default export
export * as name1 from …; // Draft ECMAScript® 2O21
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

Copy to Clipboard

nameN

要導(dǎo)出的標識符（以便其他腳本通過 import 語句進行導(dǎo)入）.

描述

有兩種不同的導(dǎo)出方式，命名導(dǎo)出和默認導(dǎo)出。你能夠在每一個模塊中定義多個命名導(dǎo)出，但是只允許有一個默認導(dǎo)出。每種方式對應(yīng)于上述的一種語法：

命名導(dǎo)出：

// 導(dǎo)出事先定義的特性
export { myFunction, myVariable };

// 導(dǎo)出單個特性（可以導(dǎo)出 var，let，
//const,function,class）
export let myVariable = Math.sqrt(2);
export function myFunction() { ... };

Copy to Clipboard

默認導(dǎo)出：

// 導(dǎo)出事先定義的特性作為默認值
export { myFunction as default };

// 導(dǎo)出單個特性作為默認值
export default function () { ... }
export default class { .. }

// 每個導(dǎo)出都覆蓋前一個導(dǎo)出

Copy to Clipboard

在導(dǎo)出多個值時，命名導(dǎo)出非常有用。在導(dǎo)入期間，必須使用相應(yīng)對象的相同名稱。

但是，可以使用任何名稱導(dǎo)入默認導(dǎo)出，例如：

// 文件 test.js
let k; export default k = 12;

Copy to Clipboard

// 另一個文件
import m from './test'; // 由于 k 是默認導(dǎo)出，所以可以自由使用 import m 替代 import k
console.log(m);        // 輸出為 12

Copy to Clipboard

你也可以重命名命名導(dǎo)出以避免命名沖突：

export { myFunction as function1,
         myVariable as variable };

Copy to Clipboard

重導(dǎo)出 / 聚合

為了使模塊導(dǎo)入變得可用，在一個父模塊中“導(dǎo)入/導(dǎo)出”這些不同模塊也是可行的。也就是說，你可以創(chuàng)建單個模塊，集中多個模塊的多個導(dǎo)出。

這個可以使用“export from”語法實現(xiàn)：

export { default as function1,
         function2 } from 'bar.js';

Copy to Clipboard

與之形成對比的是聯(lián)合使用導(dǎo)入和導(dǎo)出：

import { default as function1,
         function2 } from 'bar.js';
export { function1, function2 };

Copy to Clipboard

但這里的 function1 和 function2 在當(dāng)前模塊中變得不可用。

備注： 盡管與 import 等效，但以下語法在語法上無效：

import DefaultExport from 'bar.js'; // 有效的

Copy to Clipboard

export DefaultExport from 'bar.js'; // 無效的

Copy to Clipboard

這里正確的做法是重命名這個導(dǎo)出：

export { default as DefaultExport } from 'bar.js';

Copy to Clipboard

示例

使用命名導(dǎo)出

在模塊 my-module.js 中，可能包含以下代碼：

// module "my-module.js"
function cube(x) {
  return x * x * x;
}

const foo = Math.PI + Math.SQRT2;

var graph = {
    options: {
        color:'white',
        thickness:'2px'
    },
    draw: function() {
        console.log('From graph draw function');
    }
}

export { cube, foo, graph };

Copy to Clipboard

然后，在你的 html 頁面的頂級模塊中：

import { cube, foo, graph } from 'my-module.js';

graph.options = {
    color:'blue',
    thickness:'3px'
};

graph.draw();
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

Copy to Clipboard

著重注意以下幾點：

• 在你的 HTML 中需要包含 type="module" 的 <script> 元素這樣的腳本，以便它被識別為模塊并正確處理
• 不能通過 file:// URL 運行 JS 模塊 — 這將導(dǎo)致 CORS 錯誤。你需要通過 HTTP 服務(wù)器運行。

使用默認導(dǎo)出

如果我們要導(dǎo)出一個值或得到模塊中的返回值，就可以使用默認導(dǎo)出：

// module "my-module.js"

export default function cube(x) {
  return x * x * x;
}

Copy to Clipboard

然后，在另一個腳本中，可以直接導(dǎo)入默認導(dǎo)出：

import cube from './my-module.js';
console.log(cube(3)); // 27

Copy to Clipboard

模塊重定向

舉個例子，假如我們有如下層次結(jié)構(gòu)：

• childModule1.js: 導(dǎo)出 myFunction 和 myVariable
• childModule2.js: 導(dǎo)出 myClass
• parentModule.js: 作為聚合器（不做其他事情）
• 頂層模塊：調(diào)用 parentModule.js 的導(dǎo)出項

你的代碼看起來應(yīng)該像這樣：

// childModule1.js 中
let myFunction = ...; // assign something useful to myFunction
let myVariable = ...; // assign something useful to myVariable
export {myFunction, myVariable};

Copy to Clipboard

// childModule2.js 中
let myClass = ...; // assign something useful to myClass
export myClass;

Copy to Clipboard

// parentModule.js 中
// 僅僅聚合 childModule1 和 childModule2 中的導(dǎo)出
// 以重新導(dǎo)出他們
export { myFunction, myVariable } from 'childModule1.js';
export { myClass } from 'childModule2.js';

Copy to Clipboard

// 頂層模塊中
// 我們可以從單個模塊調(diào)用所有導(dǎo)出，因為 parentModule 事先
// 已經(jīng)將他們“收集”/“打包”到一起
import { myFunction, myVariable, myClass } from 'parentModule.js'

Copy to Clipboard

規(guī)范

瀏覽器兼容性

Report problems with this compatibility data on GitHub

Legend

Tip: you can click/tap on a cell for more information.