面试题：JavaScript模块导出与导入的常见方式有哪些

Question

请详细阐述JavaScript中ES6模块（ES Modules）的导出（export）和导入（import）的常见语法，并举例说明如何使用具名导出、默认导出以及它们对应的导入方式。同时，解释一下在Node.js环境中，传统的CommonJS模块的导出（exports和module.exports）与ES6模块导出的主要区别。

Answer 1

ES6模块导出（export）常见语法

1. 具名导出
   • 可以在定义变量、函数或类时直接导出。
   • 语法示例：

// utils.js
export const pi = 3.14;
export function add(a, b) {
    return a + b;
}
export class MathUtils {
    static multiply(a, b) {
        return a * b;
    }
}

2. 导出声明
   • 先定义，后在文件末尾使用export关键字导出。
   • 语法示例：

// utils.js
const pi = 3.14;
function add(a, b) {
    return a + b;
}
class MathUtils {
    static multiply(a, b) {
        return a * b;
    }
}
export {pi, add, MathUtils};

3. 默认导出
   • 每个模块只能有一个默认导出。
   • 语法示例：

// greeting.js
const greeting = 'Hello, world!';
export default greeting;
// 或者直接导出
// export default 'Hello, world!';

ES6模块导入（import）常见语法

1. 导入具名导出内容
   • 使用{}指定要导入的具名内容。
   • 语法示例：

// main.js
import {pi, add, MathUtils} from './utils.js';
console.log(pi);
console.log(add(2, 3));
console.log(MathUtils.multiply(4, 5));

2. 导入默认导出内容
   • 无需使用{}，可以自定义导入名称。
   • 语法示例：

// main.js
import message from './greeting.js';
console.log(message);

Node.js中CommonJS模块与ES6模块导出的主要区别

1. 导出方式
   • CommonJS：使用exports或module.exports。exports本质上是module.exports的一个引用，最终module.exports的值才是模块对外暴露的内容。例如：

// commonjsUtils.js
const pi = 3.14;
function add(a, b) {
    return a + b;
}
exports.pi = pi;
exports.add = add;
// 或者
// module.exports.pi = pi;
// module.exports.add = add;

• ES6模块：使用export关键字，更灵活，可以具名导出和默认导出。

2. 加载机制
   • CommonJS：运行时加载，模块输出的是一个值的拷贝，即导出的值在导入时就确定了，后续对导出值的修改不会影响导入模块。
   • ES6模块：编译时加载，模块输出的是值的引用，即导入模块中获取的值会随着导出模块中值的变化而变化（如果值是可改变的，如对象或数组）。
3. 适用场景
   • CommonJS：主要用于Node.js服务器端开发，适合在运行时动态确定依赖关系。
   • ES6模块：既适用于浏览器端，也适用于Node.js（Node.js从v13.2.0版本开始支持ES6模块），更适合在开发时就确定依赖关系的场景，在代码结构和复用性上更有优势。