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

着重注意以下几点：

在你的 HTML 中需要包含 type="module" 的 <script> 元素这样的脚本，以便它被识别为模块并正确处理
不能通过 file:// URL 运行 JS 模块 — 这将导致 CORS 错误。你需要通过 HTTP 服务器运行。

使用默认导出如果我们要导出一个值或得到模块中的返回值，就可以使用默认导出：
// module "my-module.js"export default function cube(x) {return x * x * x;}Copy to Clipboard
然后，在另一个脚本中，可以直接导入默认导出：
import cube from './my-module.js';console.log(cube(3)); // 27Copy to Clipboard
模块重定向举个例子，假如我们有如下层次结构：

childModule1.js: 导出 myFunction 和 myVariable
childModule2.js: 导出 myClass
parentModule.js: 作为聚合器（不做其他事情）
顶层模块：调用 parentModule.js 的导出项

你的代码看起来应该像这样：

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

Copy to Clipboard
// childModule2.js 中let myClass = ...; // assign something useful to myClassexport myClass;Copy to Clipboard

// parentModule.js 中// 仅仅聚合 childModule1 和 childModule2 中的导出// 以重新导出他们export { myFunction, myVariable } from 'childModule1.js';export { myClass } from 'childModule2.js';

Copy to Clipboard

// 顶层模块中// 我们可以从单个模块调用所有导出，因为 parentModule 事先// 已经将他们“收集”/“打包”到一起import { myFunction, myVariable, myClass } from 'parentModule.js'

Copy to Clipboard
规范 Specification
ECMAScript Language Specification
# sec-exports
浏览器兼容性Report problems with this compatibility data on GitHub

desktop
mobile
server

Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on IOS
Samsung Inte.NET
WebView Android
Deno
Node.js
export
61
Toggle history
16
Toggle history
60
Toggle history
48
Toggle history
10.1
Toggle history
61
Toggle history
60
Toggle history
45
Toggle history
10.3
Toggle history
8.0
Toggle history
61
Toggle history
1.0
Toggle history
13.2.0
footnotemore
Toggle history
default keyword with export
61
Toggle history
16
Toggle history
60
Toggle history
48
Toggle history
10.1
Toggle history
61
Toggle history
60
Toggle history
45
Toggle history
10.3
Toggle history
8.0
Toggle history
No
Toggle history
1.0
Toggle history
13.2.0
footnotemore
【如何在JavaScript模块中导出函数、对象或原始值】Toggle history
export * as namespace
72
Toggle history
79
Toggle history
80
Toggle history
60
Toggle history
14.1
Toggle history
72
Toggle history
80
Toggle history
51
Toggle history
14.5
Toggle history
11.0
Toggle history
No
Toggle history
1.0
Toggle history
13.2.0
footnotemore
Toggle history
Legend