前端工程化

一、⼯程化脚⼿架

1、脚⼿架的应⽤与回顾

• Vue react 现代框架的脚⼿架回顾
• ⽤户交互与应⽤⽣成
• 实际项⽬中的应⽤

工程化

1、狭义： 开发流程

• 分支管理
• 开发环境
• 单元测试\自动化测试
• 迭代部署： ci c持续迭代 cd 持续部署
  cicd: devops 自动化的开发运维方式（自己的项目 基础类型 自动化测试脚本 自动化部署脚手架 ）

2、广义

• 大范围：开发 发布 运维 维护 后期bug fix整个流程

开发

• 框架选型：
• 不同框架的对比：
• 模块化+组件化：工程化的基石
• 脚手架：项目团队所有的项目产生一个连接 -> 本地服务 mock服务一致的情况下生成一套框架 每一个项目都对齐
• 本地开发服务：dev server
• mock 服务：模拟 api doc

构建

• 打包、依赖、代码处理
• 缓存、增量更新（只更新增量的部分）、资源处理（静态资源、图片资源、插件处理）：性能方面的处理
• Es & babel | css & css processor：编译
• 类库打包、工具资源的应用：合并工具 避免重复打包
  构建性能优化

部署

• 持续部署
• nginx反向代理、spa路由配置
• 跨域、http证书、流量：如何统计流量 网关：统一的配置
• 环境：如何区分不同的环境 -> 不同 ip -> 不同路由 -> 配置host

性能和规范

• 缓存策略：网络层级（强缓存 协商缓存 304）
  网络层面（cdn更新策略： 定时更新 监听某个具体文件 ）+文件层面（hash本地文件）（前后端）构建层面缓存
• CDN：内容分发网络 -> 在物理上将内容放到更近的不同的节点上 -> 距离服务器更近的获取资源更高效
• 请求：内容压缩、请求合并、数量减少、使用长连接、http2 帧传输、限制6个tcp连接、建立tcp连接优化
• 日志性能：定位问题 发现为题
• 预加载：骨架屏 工程化上给到业务的一个模板

sdk: 封装 兼容性
cdn：
为什么webpack写的配置回去改变我们的代码 怎么给webpack写插件

二、前端AST应⽤

AST的概念: 抽象语法树

• a. ⽣成过程
  code ->(简单粗暴的处理方式： 比如字符串替换) ast （工程化的预处理： AST generator）-> code
• b. 词法分析 & 语法分析
• c. AST基础处理
• d. babel基础

脚手架

• 快速自动化搭建启动项目工具 批量化生产的作用

目标：

    // 命令行直接创建基于模版的项目
    // vue create ${name}
1
2

手写脚手架

第一步：处理依赖

    npm i path		// 路径处理/合并
    npm i chalk@4.1.0		// 控制台样式高亮
    npm i fs-extra		// file system模块的拓展
    npm i inquirer@8.2.4		// 命令行输入参数的 轮询 跟用户的交互 补充文件
    npm i commander		// 在主命令下面生成自定义的指令
    npm i axios		// 网络请求拿模板什么的
    npm i download-git-repo		// 下载远程的模板文件 当成一个项目

    // ora 控制台的loading 
    // easy-table 控制台输出表格
    // figlet 打logo
1
2
3
4
5
6
7
8
9
10
11

第二步：处理工程入口

    // 1. 初始化npm
    npm init

    // 2. 新建主命令（主入口文件），配置项更新
    // bin + package.json

    // 3. 关联主命令与配置项
    npm link   
    // package.json 中添加 "bin": "bin/zwCli.js"
    #! /usr/bin/env node  // 声明全局的可执行的主入口 基于node
const program = require('commander') //自定义指令

// 定义命令和参数
// create命令
program.command('create ').description('create a new project').option('-f, --force', 'overwrite target directory if it exist').action((name, options) => {
    // 打印执行结果
    console.log('program name is', name)
    require('../lib/create')(name, options)
})

// 解析用户执行命令的传入参数
program.parse(process.argv)

    // 4. 执行主命令即可关联逻辑内容
    // zw-cli: 主命令 已经被npm link注入到了全局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

第三步：加入命令交互

交互好帮手 - commander

    // 创建命令 - create
    program.command('create ') 	// 新建app的名称
    .description（'create a new project'）	// 描述
    .options('-f, --force', 'overwrite target directory if it exist') 	// 附加的配置
    .action((name, options) => {
    	// 执行
    	// 打印执行结果
   		console.log('program name is', name)
    	require('../lib/create')(name, options)
	})
	// 解析用户执行命令的传入参数
	program.parse(process.argv)

    // 4. 执行主命令即可关联逻辑内容
    // zw-cli: 主命令 已经被npm link注入到了全局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

lib 文件夹：实现各种能力

lib/create

//  用户的操作 交互
const path = require('path')
const fs = require('fs-extra')
const inquirer = require('inquirer')
const Generator = require('./generator')
// 1. 对外抛出一个方法用来接收用户要创建的文件项目名以及参数
module.exports = async function(name, options) {
    // 判断项目是否存在
    const cwd = process.cwd()
    const targetAir = path.join(cwd, name)
    // 目录是否存在
    if (fs.existsSync(targetAir)) {
        // 是否为强制创建
        if (options.force) {
            await fs.remove(targetAir)
        } else {
            // 询问用户是否确定要覆盖
            let { action } = await inquirer.prompt([
                {
                    name: 'action',
                    type: 'list',
                    message: 'Target directory already exists',
                    choices: [{
                        name: 'Overwrite',
                        value: 'overwrite'
                    }, {
                        name: 'Cancel',
                        value: false
                    }]
                }
            ])
            // 如果用户拒绝覆盖则停止生成操作
            if (!action) {
                return;
            } else if (action === 'overwrite') {
                await fs.remove(targetAir)
            }
        }
    }
    // 新建模板
    const generator = new Generator(name, targetAir)
    generator.create()
}

// generator.js 最终生成
const { getRepoList, getTagList } = require('./http')

const ora = require('ora')
const inquirer = require('inquirer')
const util = require('util') // promisfy：promise化
const downloadGitRepo = require('download-git-repo')  // 回调函数形式 不支持promise、 需要promise化
const path = require('path')
const chalk = require('chalk')

// 封装loading外壳
async function wrapLoading(fn, message, ...args) {
    const spinner = ora(message)

    spinner.start()

    try {
        const result = await fn(...args)

        spinner.succeed()
        return result
    } catch (error) {
        spinner.fail('Requiest failed, please refetch...')
    }
}

// 生成模板的类 实例化
class Generator {
    constructor(name, targetDir) {
        this.name = name
        this.targetDir = targetDir
        this.downloadGitRepo = util.promisify(downloadGitRepo)
    }

    // 获取用户选择的模版
    // 1. 从远端拉模版数据
    // 2. 用户去选择自己已有下载的模版名称
    // 3. 返回用户选择的模版
    async getRepo() {
        const repoList = await wrapLoading(getRepoList, 'waiting for fetch template')
		// 如果没有拿到模板 退出
        if (!repoList) return
		// 模板的名字是索引模板的唯一关键字
        const repos = repoList.map(item => item.name)
        // 让用户去选择自己新下载的模版名称
        const { repo } = await inquirer.prompt({
            name: 'repo',
            type: 'list',
            choices: repos,
            message: 'Please choose a template to create project'
        })
        return repo
    }

    // 获取用户选择的版本
    // 1. 基于repo的结果，远程拉版本列表
    // 2. 自动选择最新的tag
    async getTag(repo) {
        const tags = await wrapLoading(getTagList, 'waiting for fetch tag', repo)
        if (!tags) return
        const tagsList = tags.map(item => item.name)      
        return tagsList[0]
    }

    // 下载远程模版
    // 1. 拼接下载地址
    // 2. 调用下载方法
    async download(repo, tag) {
        const requestUrl = `FEcourseZone/${repo}${tag ? '#'+tag : ''}`
        await wrapLoading(
            this.downloadGitRepo,
            'waiting download template',
            requestUrl,
            path.resolve(process.cwd(), this.targetDir)
        )
    }

    // 核心创建逻辑
    async create() {
        // 1. 获取模版名称
        const repo = await this.getRepo()
        // 2. 获取tag名称
        const tag = await this.getTag(repo)
        // 3. 下载模版到目录
        await this.download(repo, tag)
        console.log(`\r\nSuccessfully created project ${chalk.cyan(this.name)}`)
    }
}
module.exports = Generator

// 网络请求：拉取模板
const axios = require('axios')
// 拦截器
axios.interceptor.response.use(res=>{
	return res.data
})
// 获取模板列表
async function getPepoList(){
	return axios.get('https://api.github.com/orgs/FEcourseZone/repos')
}
// 获取版本信息
async function getTagList(repo) {
    return axios.get(`https://api.github.com/repos/FEcourseZone/${repo}/tags`)}
module.exports = {
	getRepoList
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

执行
zw-cli

zw-cli create app

npm publish 封装到npm包里

三、⼯程化webpack

1. 从零配置webpack

• a. ⼯具的三⼤件
• b. Webpack⼯作模式
• C. 模块化打包的实现

2. webpack异步玩法

• a. webpack异步加载的原理
• b. 路由懒加载的重要意义
• c. webpack的分包策略
• d. 重点⾯试题以及⾯试官到底想问什么

3. webpack的HMR

• a. 什么是HMR
• b. webpack集成HMR
• c. 实现原理与流程
• d. 为什么⾯试官总是喜欢问HMR

4. webpack的loader与插件

• a. 编写webpack的loader
• b. 编写webpack的插件