模块的导出（export）与导入（import）有许多种语法。

导出

声明时同时导出

// 导出变量
export const MINUTE = 60

// 导出函数
export function sum(a, b) {
    return a + b
}

声明后导出

const MINUTE = 60

function sum(a, b) {
    return a + b
}

export { MINUTE, sum }

$$tip

如果一个变量没有导出，那么在其他模块中将会无法导入，也就无法访问。

$$

重命名导出

在导出的同时可以换一个名字。

const MINUTE = 60

function sum(a, b) {
    return a + b
}

export { MINUTE as fenzhong, sum as qiuhe }

默认导出

添加 default 关键字可以设置当前的默认导出。

function sum(a, b) {
    return a + b
}

// export { sum } // 正常导出

export default sum // 默认导出

默认导出的变量可以被直接导入使用而不用加大括号。、

// import { sum } from "./math.js" // 正常导入
import sum from "./math.js" // 默认导入

console.log(sum(5, 6)) // 11

$$tip

一个模块只能存在一个默认导出。

$$

导入

选择导入

将要导入的东西列在大括号中则可以使用， 没有导入的无法使用。

export function sum(a, b) {
    return a + b
}

export function sub(a, b) {
    return a - b
}

import { sum } from "./math.js"

console.log(sum(5, 6)) // 11
console.log(sub(5, 6)) // sub 未导入，报错

重命名导入

导入过程中可以对变量进行重命名。

export function sum(a, b) {
    return a + b
}

import { sum as qiuhe } from "./math.js"

console.log(qiuhe(5, 6)) // 11

默认导入

默认导出的模块可以使用默认导入。

export default function (a, b) {
    return a + b
}

import qiuhe from "./math.js"

console.log(qiuhe(5, 6)) // 11

总结

导出和导入的语法主体实在太多的，通常只使用最简单的导出导入语法即可，如有特殊需求再回顾此章节。