js模块化入门：从CommonJS到ES6

2023-09-03 18:51:13

前言

JavaScript模块化是一个关键技术，它使我们能够将代码组织成更小、可复用的块，从而提高代码的可维护性、可读性和可重用性。在本文中，我们将探讨JavaScript模块化的历史，从CommonJS到ES6，并详细介绍各种模块加载器和打包工具。

JavaScript模块化的历史

JavaScript模块化的历史可以追溯到2009年，当时Ryan Dahl创建了CommonJS规范。CommonJS规范定义了一种模块系统，允许开发者将代码组织成单独的文件，并使用require()函数加载这些文件。

在2015年，随着ES6的发布，JavaScript模块化迎来了新的篇章。ES6中引入了export和import，允许开发者直接在源代码中定义和加载模块。

CommonJS是第一个广泛使用的JavaScript模块系统。它基于Node.js的模块系统，使用require()函数加载模块。CommonJS模块通常使用.js扩展名，并且可以包含多个导出。

以下是CommonJS模块的示例：

// module.js
exports.hello = function() {
  console.log('Hello, world!');
};

// main.js
var module = require('./module');

module.hello(); // Hello, world!

ES6中引入了export和import关键字，允许开发者直接在源代码中定义和加载模块。ES6模块通常使用.js或.mjs扩展名，并且只能包含一个默认导出或多个命名导出。

以下是ES6模块的示例：

// module.js
export default function hello() {
  console.log('Hello, world!');
};

// main.js
import hello from './module';

hello(); // Hello, world!

为了在浏览器中加载模块，我们需要使用模块加载器。常用的模块加载器包括：

Webpack ：Webpack是一个模块打包工具，它可以将多个模块打包成一个或多个文件。Webpack支持CommonJS、ES6和AMD等多种模块格式。
Rollup ：Rollup是一个模块打包工具，它可以将多个模块打包成一个文件。Rollup支持CommonJS、ES6和UMD等多种模块格式。
Browserify ：Browserify是一个模块加载器，它可以将CommonJS模块转换为可以在浏览器中运行的代码。