es模块 导入 导出

英文全称

es： ecma script

来源

es6引入的

作用

标准化，规范化，模块化

命名导出

// 声明时，直接导出

export const PI = 3.14159

export function greet(name) {
  return `Hello, ${name}!`
}

// 先声明，后导出

const PI = 3.14159

function greet(name) {
  return `Hello, ${name}!`
}

export { greet, PI }

导入命名导出的模块

import { greet, PI } from "./module.js"

console.log(greet(PI)) // Hello, 3.14159!

默认导出

// 声明时直接导出
export default function greet(name) {
  return `Hello, ${name}!`
}

// 先声明，后导出
function greet(name) {
  return `Hello, ${name}!`
}

export default greet

// 默认导出，可以省略名称
export default function (name) {
  return `Hello, ${name}!`
}

导入默认导出模块

import greet from "./greet.js"

console.log(greet("3.1415"))

---

总结

命名导出

适用有多个功能的模块

• 可以导出多个值，并且可以选择性导入，灵活性更好
• 指定了确切的名字，便于代码追踪和维护

默认导出

适用功能单一的模块

• 简化了单个值的导入和导出，可以让代码更加简洁

---

同时使用

// 导出

export const PI = 3.14159

export default function greet(name) {
  return `Hello, ${name}!`
}

// 导入

import greet, { PI } from "./greet.js";

使用 as 关键字

功能: 用于重命名导入或导出的值

使用场景: 解决名称冲突、适应当前上下文，提高可读性

在 import 中使用 as

// 假设 greet1.js 中 greet 函数是命名导出
import { greet as sayHello } from "./greet1.js"

// 假设 greet2.js 中 greet 函数是默认导出
import { default as sayHello } from "./greet2.js"

// 将 module.js 中的所有导出内容聚合到 module 对象中
import * as module from "./module.js"
console.log(module.greet("3.1415"))

在 export 中使用 as

function greet(name) {
  return `Hello, ${name}!`
}

export { greet as sayHello }

// 将 greet 函数作为默认导出
// 和`export default greet`效果一样
export { greet as default }

重新导出

import { greet } from "./module1.js"
export { greet }

import { sayHello } from "./module2.js"
export { sayHello }

// 使用 export ... from ... 语法
export { greet } from "./module1.js"
export { sayHello as sayHi } from "./module2.js"

export { default } from "./module3.js"
// 重命名之后，其它模块需要以命名导出的方式来导入 module3
export { default as Module3 } from "./module3.js"

动态导入

impor("./module.js").then((module) => {
  console.log(module.greet("3.1415"))
})

const module = await import("./module.js")
console.log(module.greet("3.1415"))