前端工程化06-JavaScript模块化&CommonJS规范&ES Module

在前端工程化的过程中，JavaScript 模块化是一个核心概念。以下是如何使用 CommonJS 规范和 ES6 Module 实现 JavaScript 模块化的简要说明和示例代码：

CommonJS 规范

在 Node.js 环境中，我们通常使用 CommonJS 规范来实现模块化。

示例代码：

// math.js
module.exports = {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  }
};
 
// 使用 math.js
const math = require('./math');
console.log(math.add(1, 2)); // 输出: 3
console.log(math.subtract(5, 3)); // 输出: 2

ES Module

ES6 引入了模块系统，通过 import 和 export 关键字实现模块的导入和导出。

示例代码：

// math.js
export function add(a, b) {
  return a + b;
}
 
export function subtract(a, b) {
  return a - b;
}
 
// 使用 math.js
import { add, subtract } from './math.js';
console.log(add(1, 2)); // 输出: 3
console.log(subtract(5, 3)); // 输出: 2

为了在现代浏览器中使用 ES6 Module，你可能需要将 TypeScript 或 Babel 编译成 ES5，或者在支持 ES6 Module 的环境中直接使用。