模块化:CommonJS与ESModule详解
需积分: 5 4 浏览量
更新于2024-08-03
收藏 11KB MD 举报
"关于笔记的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:` 盘)。理解这些概念对于构建和部署项目至关重要。
2022-07-02 上传
2024-10-23 上传
今天也在码前端–霖
- 粉丝: 113
- 资源: 50
最新资源
- 掌握Jive for Android SDK:示例应用的使用指南
- Python中的贝叶斯建模与概率编程指南
- 自动化NBA球员统计分析与电子邮件报告工具
- 下载安卓购物经理带源代码完整项目
- 图片压缩包中的内容解密
- C++基础教程视频-数据类型与运算符详解
- 探索Java中的曼德布罗图形绘制
- VTK9.3.0 64位SDK包发布,图像处理开发利器
- 自导向运载平台的行业设计方案解读
- 自定义 Datadog 代理检查:Python 实现与应用
- 基于Python实现的商品推荐系统源码与项目说明
- PMing繁体版字体下载,设计师必备素材
- 软件工程餐厅项目存储库:Java语言实践
- 康佳LED55R6000U电视机固件升级指南
- Sublime Text状态栏插件:ShowOpenFiles功能详解
- 一站式部署thinksns社交系统,小白轻松上手