面试题：JavaScript 模块化之 ES Modules 基础

Question

请阐述 ES Modules 与 CommonJS 在导出和导入语法上的主要区别，并举例说明如何在 ES Modules 中进行默认导出和命名导出，以及相应的导入方式。

Answer 1

导出和导入语法主要区别

1. 导出语法：
   • ES Modules：支持默认导出（export default）和命名导出（export）。例如：

// 命名导出
export const name1 = 'value1';
export function func1() {}

// 默认导出
const message = 'Hello';
export default message;

- **CommonJS**：只有一种导出方式，通过`module.exports`或`exports`对象。例如：

const name1 = 'value1';
function func1() {}
module.exports = {
    name1,
    func1
};
// 或者
exports.name1 = name1;
exports.func1 = func1;

2. 导入语法：
   • ES Modules：对于命名导入使用花括号，默认导入不需要花括号。例如：

// 命名导入
import { name1, func1 } from './module.js';
// 默认导入
import message from './module.js';

- **CommonJS**：使用`require`函数导入整个模块，然后访问模块导出的属性。例如：

const module = require('./module.js');
const name1 = module.name1;
const func1 = module.func1;

ES Modules 默认导出和命名导出及导入方式

1. 默认导出和导入：
   • 默认导出：一个模块只能有一个默认导出。

// module.js
const data = { key: 'value' };
export default data;

- **默认导入**：

// main.js
import myData from './module.js';
console.log(myData.key);

2. 命名导出和导入：
   • 命名导出：可以有多个命名导出。

// module.js
export const num = 42;
export function add(a, b) {
    return a + b;
}

- **命名导入**：

// main.js
import { num, add } from './module.js';
console.log(num);
console.log(add(2, 3));