通过 export
可以把 JS 模块中的值导出,然后可以用过 import
或动态导入( import()
)的方式,使用导出的值。导入绑定的值取决于导出值的模块——当模块更新值时,这种更新会反映在导入值的程序文件中。
怎样能够使用 export
?要导出值的文件,在运行时中要被解析成模块(将整个 JS 文件分拆成单个功能独立的模块)才行。
在 HTML 中,要在 script
标签中加上 type
"module"= 。或者从其他模块中导入。模块中的代码自动处于严格模式(在严格模式下,错误会变得明显、运行更快、禁止在未来版本可能定义的语法)。
// file test.js
const k = 12
export default k
// 另一种写法, export default const k = 12 是错误的,export default 后面应该是函数表达式
如果有两个模块文件同时导出相同的标识符,到共同的第三个文件中,那么它们的导出无效。
// -- mod1.js --
export const a = 1;
// -- mod2.js --
export const a = 3;
// -- barrel.js --
export * from "./mod1.js";
export * from "./mod2.js";
// -- main.js --
import * as ns from "./barrel.js";
console.log(ns.a); // undefined
直接导出会报错:
import { a } from './barrel.js'
// The requested module './barrel.mjs' contains conflicting star exports for name 'a'
使用 export ... from ...
的正确方法:
export { default as DefaultExport } from 'bar.js'
// wrong way:
// export DefaultExport from 'bar.js'
如果想加载模块到非模块上下文中,需要使用“动态导入”。
动态导入,指 import()
语法。在类函数的表达式中,允许异步加载模块,动态地进入到一个非模块环境。