032_前端模块化

1. 传统开发模式的主要问题

1.1. 命名冲突

1.2. 文件依赖

2. 模块化(工程化)

2.1. 模块化就是把单独的一个功能封装到一个模块(文件)中, 模块直接相互隔离, 但是可以通过特定的接口公开内部成员, 也可以依赖别的模块。

2.2. 模块化开发的好处就是方便代码重用, 从而提高开发效率, 并且方便后期维护。

3. ES6模块化

3.1. 在ES6模块化规范诞生之前, JavaScript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。

3.2. 但是, 这些社区提出的模块化标准, 还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准。

3.2.1. AMD和CMD适用于浏览器端的JavaScript模块化。

3.2.2. CommonJS适用于服务器端的JavaScript模块化。

3.3. 因此, ES6语法规范中, 在语言层面上定义了ES6模块化规范, 是浏览器与服务器通用的模块化开发规范。

3.4. ES6模块化规范中定义:

3.4.1. 每个js文件都是一个独立的模块。

3.4.2. 导入模块成员使用import关键字。

3.4.3. 暴露模块成员使用export关键字。

4. webpack概述

4.1. webpack是一个流行的前端项目构建工具(打包工具), 可以解决当前web开发中所面临的困境。

4.2. webpack提供了友好的模块化支持, 以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能, 从而让程序员把工作重心放到具体的功能实现上, 提高了开发效率和项目的可维护性。

4.3. 目前绝大多数企业中的前端项目, 都是基于webpack进行打包构建的。

5. 安装VSCode

5.1. 下载地址: https://code.visualstudio.com/

5.2. 双击下载好的VSCodeUserSetup-x64-1.63.2.exe 

5.3. 同意许可协议 

5.4. 选择安装位置 

5.5. 选择开始菜单文件夹 

5.6. 选择附件任务 

5.7. 准备安装 

5.8. 安装过程 

5.9. 安装完成 

6. 安装nodeJS

6.1. 下载地址: https://nodejs.org/zh-cn/

 

6.2. 双击下载好的node-v16.13.2-x64.msi 

6.3. 欢迎页面, 安装导向, 检测电脑环境 

6.4. 安装导向 

6.5. 接收许可协议 

6.6. 选择自己要安装到的文件夹 

6.7. 选择安装项, 适用默认即可 

6.8. 安装 

6.9. 安装完成 

6.10. 查看是否安装成功, 查看node版本: node -v, 查看npm版本: npm -v。