JS 中的 export 和 import 声明

通过 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() 语法。在类函数的表达式中,允许异步加载模块,动态地进入到一个非模块环境。

欢迎通过「邮件」或者点击「这里」告诉我你的想法
Welcome to tell me your thoughts via "email" or click "here"