从0开始学习JavaScript--JavaScript ES6 模块系统

JavaScript ES6（ECMAScript 2015）引入了官方支持的模块系统，使得前端开发更加现代化和模块化。本文将深入探讨 ES6 模块系统的各个方面，通过丰富的示例代码详细展示其核心概念和实际应用。

ES6 模块的基本概念

1 模块的导出

ES6 模块通过 export 关键字导出功能，可以导出变量、函数、类等。

// mathModule.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

2 模块的导入

使用 import 关键字导入模块提供的功能。

// app.js
import {
    add, subtract } from './mathModule';

console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2

默认导出与默认导入

1 默认导出

一个模块可以有一个默认导出，通过 export default 实现。

// defaultModule.js
const defaultMessage = 'Hello, default export!';

export default defaultMessage;

2 默认导入

在导入时，使用 import moduleName from 'modulePath' 语法进行默认导入。

// appDefault.js
import defaultMessage from './defaultModule';

console.log(defaultMessage);