# 53.前端工程化
1.能够了解模块化的相关规范 2.了解webpack 3.了解使用Vue单文件组件 4.能够搭建Vue脚手架
5.掌握Element-UI的使用
# 1.模块化概述
传统开发模式的主要问题
- ① 命名冲突
- ② 文件依赖
通过模块化解决上述问题
- 模块化就是把单独的一个功能封装到一个模块 (文件) 中, 模块之间相互隔离, 但是可以通过特定的接口公开内部成员, 也可以依赖别的模块
- 模块化开发的好处: 方便代码的重用, 从而提升开发效率, 并且方便后期的维护
# 2.模块化的分类
# A.浏览器端的模块化
1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js 2).CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.js@xc: 代码已经复制到粘贴板
1
2
3
4
2
3
4
# B.服务器端的模块化
服务器端的模块化规范是使用CommonJS规范： 1).使用require引入其他模块或者包 2).使用exports或者module.exports导出模块成员 3).一个文件就是一个模块，都拥有独立的作用域@xc: 代码已经复制到粘贴板
1
2
3
4
2
3
4
# C.ES6模块化
ES6模块化规范中定义： 1).每一个js文件都是独立的模块 2).导入模块成员使用import关键字 3).暴露模块成员使用export关键字@xc: 代码已经复制到粘贴板
1
2
3
4
2
3
4
小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。
ES6模块化是浏览器端和服务器端通用的规范.@xc: 代码已经复制到粘贴板
1
# 3.在NodeJS中安装babel
# A.安装babel
打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node 安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill@xc: 代码已经复制到粘贴板
1
2
3
2
3
# B.创建babel.config.js
在项目目录中创建babel.config.js文件。 编辑js文件中的代码如下： const presets = [ ["@babel/env",{ targets:{ edge:"17", firefox:"60", chrome:"67", safari:"11.1" } }] ] //暴露 module.exports = { presets }@xc: 代码已经复制到粘贴板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# C.创建index.js文件
在项目目录中创建index.js文件作为入口文件 在index.js中输入需要执行的js代码，例如： console.log("ok");@xc: 代码已经复制到粘贴板
1
2
3
4
2
3
4
# D.使用npx执行文件
打开终端，输入命令：npx babel-node ./index.js@xc: 代码已经复制到粘贴板
1
# 4.设置默认导入/导出
# A.默认导出
// 当前文件模块为 m1.js // 定义私有成员 a 和 c let a = 10 let c = 20 // 外界访问不到变量 d, 因为它没有暴露出去 let d = 30 function show(){} // 将本模块中的私有成员暴露出去, 供其它模块使用 export default { a, c, show }@xc: 代码已经复制到粘贴板
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# B.默认导入
import 接收名称 from "模块标识符"，如下： // 导入模块成员 import m1 form './m1.js' console.log(m1) // 打印输出的结果为: // { a: 10, c: 20, show: [Function: show] }@xc: 代码已经复制到粘贴板
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
注意：每个模块中, 只允许使用唯一的一次 export default, 否则会报错!
# 5.设置按需导入/导出
# A.按需导出
- 按需导出语法 export let s1 = 10
// 当前文件模块为 m1.js // 向外按需导出变量 s1 export let s1 = 'aaa' // 向外按需导出变量 s2 export let s2 = 'ccc' // 向外按需导出方法 say export function say = function() {}@xc: 代码已经复制到粘贴板
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# B.按需导入
// 导入模块成员 import {s1, s2 as ss2, say} from './m1.js' console.log(s1) // 打印输出 aaa console.log(ss2) // 打印输出 ccc console.log(say) // 打印输出 [Function: say]@xc: 代码已经复制到粘贴板
1
2
3
4
5
6
2
3
4
5
6
注意：每个模块中, 可以使用多次按需导出
# 6.直接导入并执行代码
有时候, 我们只想单纯执行某个模块中的代码, 并不需要得到模块中向外暴露的成员, 此时, 可以直接导入并执行模块代码
// 当前文件模块为 m2.js // 在当前模块中执行一个 for 循环操作 for(let i = 0; i < 3; i++){ console.log(i) }@xc: 代码已经复制到粘贴板
1
2
3
4
5
6
2
3
4
5
6
// 直接导入并执行模块代码 import './m2.js'@xc: 代码已经复制到粘贴板
1
2
2