模块导入和导出是 JavaScript 模块化的核心概念。现代 JavaScript 通常使用 ES6（ECMAScript 2015）引入的模块系统，允许使用 import 和 export 语句。
通过范例学习
现在有一个math.js文件
// math.js
// 命名导出多个变量和函数
export const pi = 3.14;
export function add(x, y) {
return x + y;
}
export function subtract(x, y) {
return x - y;
}
导入命名导出: ${ }
// app.js
// 导入命名导出
import { pi, add, subtract } from './math.js';
console.log(`PI: ${pi}`); // 输出: PI: 3.14
console.log(`3 + 5 = ${add(3, 5)}`); // 输出: 3 + 5 = 8
console.log(`7 - 2 = ${subtract(7, 2)}`); // 输出: 7 - 2 = 5
如果此时还有一个square.js文件需要导入
// square.js
// 默认导出一个函数
export default function square(x) {
return x * x;
}
同时导入命名和默认导出
app.js
// app.js
import square, { pi, add, subtract } from './math.js';
console.log(`PI: ${pi}`); // 输出: PI: 3.14
console.log(`3 + 5 = ${add(3, 5)}`); // 输出: 3 + 5 = 8
console.log(`Square of 5: ${square(5)}`); // 输出: Square of 5: 25
重命名的导入方式
// app.js
import { add as addition, subtract as subtraction } from './math.js';
console.log(`3 + 5 = ${addition(3, 5)}`); // 输出: 3 + 5 = 8
console.log(`7 - 2 = ${subtraction(7, 2)}`); // 输出: 7 - 2 = 5
聚合模块导入
建一个index,js文件
// index.js
export { pi, add, subtract } from './math.js';
export { default as square } from './square.js';
然后就可以在app.js当中这么用：
// app.js
import { pi, add, square } from './index.js';
console.log(`PI: ${pi}`); // 输出: PI: 3.14
console.log(`3 + 5 = ${add(3, 5)}`); // 输出: 3 + 5 = 8
console.log(`Square of 5: ${square(5)}`); // 输出: Square of 5: 25
