如何在JavaScript模块中导出函数、对象或原始值 _JavaScript

在创建 JAVAScript 模块时，export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用 import 进行导入时，这些绑定值只能被导入模块所读取，但在 export 导出模块中对这些绑定值进行修改，所修改的值也会实时地更新。
无论您是否声明，导出的模块都处于严格模式。export 语句不能用在嵌入式脚本中。
语法存在两种 exports 导出方式：

命名导出（每个模块包含任意数量）
默认导出（每个模块包含一个）

// 导出单个特性export let name1, name2, …, nameN; // also var, constexport let name1 = …, name2 = …, …, nameN; // also var, constexport 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 …; // does not set the default exportexport * as name1 from …; // Draft ECMAScript® 2O21export { name1, name2, …, nameN } from …;export { import1 as name1, import2 as name2, …, nameN } from …;export { default } from …;

Copy to Clipboard
nameN
要导出的标识符（以便其他脚本通过 import 语句进行导入）.
描述有两种不同的导出方式，命名导出和默认导出。你能够在每一个模块中定义多个命名导出，但是只允许有一个默认导出。每种方式对应于上述的一种语法：
命名导出：

// 导出事先定义的特性export { myFunction, myVariable };// 导出单个特性（可以导出 var，let，//const,function,class）export let myVariable = Math.sqrt(2);export function myFunction() { ... };

Copy to Clipboard
默认导出：

// 导出事先定义的特性作为默认值export { myFunction as default };// 导出单个特性作为默认值export default function () { ... }export default class { .. }// 每个导出都覆盖前一个导出

Copy to Clipboard
在导出多个值时，命名导出非常有用。在导入期间，必须使用相应对象的相同名称。
但是，可以使用任何名称导入默认导出，例如：
// 文件 test.jslet k; export default k = 12;Copy to Clipboard

// 另一个文件import m from './test'; // 由于 k 是默认导出，所以可以自由使用 import m 替代 import kconsole.log(m);// 输出为 12

Copy to Clipboard
你也可以重命名命名导出以避免命名冲突：
export { myFunction as function1,myVariable as variable };Copy to Clipboard
重导出 / 聚合为了使模块导入变得可用，在一个父模块中“导入/导出”这些不同模块也是可行的。也就是说，你可以创建单个模块，集中多个模块的多个导出。
这个可以使用“export from”语法实现：
export { default as function1,function2 } from 'bar.js';Copy to Clipboard
与之形成对比的是联合使用导入和导出：
import { default as function1,function2 } from 'bar.js';export { function1, function2 };Copy to Clipboard
但这里的 function1 和 function2 在当前模块中变得不可用。
备注：尽管与 import 等效，但以下语法在语法上无效：
import DefaultExport from 'bar.js'; // 有效的Copy to Clipboard
export DefaultExport from 'bar.js'; // 无效的Copy to Clipboard
这里正确的做法是重命名这个导出：
export { default as DefaultExport } from 'bar.js';Copy to Clipboard
示例
使用命名导出在模块 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)); // 27console.log(foo);// 4.555806215962888

Copy to Clipboard