JS ES2015模塊的導入與導出

本文適用於ES2015(ES6)標準的js模塊的語法與用法。

導出

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

更多教程:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export

導出單個特性對象

對象，方法，類

export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

導出多個對象

export { name1, name2, …, nameN };

重命名導出

export { variable1 as name1, variable2 as name2, …, nameN };

解構導出並重命名

export const { name1, name2: bar } = o;

設置默認導出的對象

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

導出模塊合

export * from …; // 沒有設置默認導出
export * as name1 from …; // ECMAScript®2O21草案
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

導入

靜態的import 語句用於導入由另一個模塊導出的綁定。無論是否聲明瞭 strict mode ，導入的模塊都運行在嚴格模式下。

在瀏覽器中，import 語句只能在聲明瞭 type="module" 的 script 的標籤中使用。

低版本瀏覽器，注意轉換代碼。

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");//這是一個處於第三階段的提案。

更多教程:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import