模块化：CommonJS与ESModule详解

"关于笔记的Markdown文件，涵盖了CommonJS和ESModule模块化的知识，以及打包工具Browserify、Babel的使用和Webpack的初体验流程" 在编程中，模块化是一种组织代码的方式，它允许我们将复杂的程序分解为可重用和独立的组件。本笔记主要探讨了两种常见的JavaScript模块规范：CommonJS 和 ESModule。 **CommonJS** CommonJS 是 Node.js 使用的模块系统，它使得服务器端的 JavaScript 可以进行模块化开发。以下是一些关键知识点： 1. **暴露模块**： - `module.exports = xxx`：这是最基础的暴露模块的方式，你可以将任何对象、函数或值赋给 `module.exports` 来对外提供。 - `exports.xxx = xxx`：这允许你向外部暴露模块内的多个属性或方法，但要注意不要覆盖 `module.exports` 的初始设置。 2. **导入模块**： - `require('module_name')`：这是 CommonJS 中导入模块的标准方法。`module_name` 可以是相对路径或绝对路径，如果导入的是一个文件夹，Node.js 会查找该文件夹下的 `package.json` 文件，根据 `main` 属性指定的入口文件加载，若没有则默认加载 `index.js`。 - 内置模块和 npm 模块：如 `require('uniq')` 和 `require('http')`，分别代表导入内置模块和通过 npm 安装的第三方模块。 **ESModule** ESModule（ECMAScript 模块）是 JavaScript 的原生模块系统，主要用于浏览器环境和现代开发工具。其特点包括： 1. **暴露模块**： - `export`：你可以使用 `export` 关键字来分别暴露模块中的多个变量、函数或类。 - `export default`：用于设置默认导出，当模块只有一个主要的导出项时推荐使用。 2. **导入模块**： - `import { a, b, c } from './m1.js'`：这种语法可以导入模块中导出的特定部分。 - `import * as c from './m2.js'`：导入整个模块并将其作为一个命名空间对象。 - `import d from './m3.js'`：导入默认导出项。 - 重名问题：可以通过 `import { f, g } from './m4.js'` 或 `import e, { f, g } from './m4.js'` 解决重名问题。 **打包工具** - **Browserify**：它允许你在浏览器环境中使用 CommonJS 规范，通过转换 CommonJS 模块为浏览器可理解的格式。 **Babel**： Babel 是一个 JavaScript 转换器，用于将现代 JavaScript 代码转换为浏览器可以识别的旧版本。例如，使用 Babel 可以将 ESModule 转换为 CommonJS 或其他格式。示例命令： ``` npx babel ./js -d ./build/js ``` **Webpack 初体验流程**： 1. 创建项目目录结构，包括 `public`、`src` 和 `js` 文件夹。 2. 在 `src` 中编写遵循 ESModule 语法的 `main.js` 和 `m1.js` 文件。 3. 初始化 npm 项目。 4. 安装 Webpack 和 webpack-cli。 5. 运行 `npx webpack` 命令，指定入口文件、输出路径、输出文件名以及开发模式。 6. 将生成的 `bundle.js` 文件引入到 `public/index.html` 的 `<script>` 标签中。 最后，注意区分网站根目录（存放静态资源的地方）、系统根目录（如 Linux 的 `/` 或 Windows 的 `D:` 盘）。理解这些概念对于构建和部署项目至关重要。