# 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
1
2
3
4
2
3
4
# B.服务器端的模块化
服务器端的模块化规范是使用CommonJS规范：
1).使用require引入其他模块或者包
2).使用exports或者module.exports导出模块成员
3).一个文件就是一个模块，都拥有独立的作用域
1
2
3
4
2
3
4
# C.ES6模块化
ES6模块化规范中定义：
1).每一个js文件都是独立的模块
2).导入模块成员使用import关键字
3).暴露模块成员使用export关键字
1
2
3
4
2
3
4
小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。
ES6模块化是浏览器端和服务器端通用的规范.
1
# 3.在NodeJS中安装babel
# A.安装babel
打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill
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 }
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");
1
2
3
4
2
3
4
# D.使用npx执行文件
打开终端，输入命令：npx babel-node ./index.js
1
# 4.设置默认导入/导出
# A.默认导出
// 当前文件模块为 m1.js
// 定义私有成员 a 和 c
let a = 10
let c = 20
// 外界访问不到变量 d, 因为它没有暴露出去
let d = 30
function show(){}
// 将本模块中的私有成员暴露出去, 供其它模块使用
export default {
a,
c,
show
}
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] }
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() {}
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]
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)
}
1
2
3
4
5
6
2
3
4
5
6
// 直接导入并执行模块代码
import './m2.js'
1
2
2