2021前端工程化面试精选——持续更新

目录

1. Babel的原理是什么
2. 谈谈你对前端监控的理解
3. 谈一下你对前端工程化的理解

1. Babel的原理是什么

babel的转译过程也分为三个阶段，这三步具体是：

• 解析Parse：将代码解析⽣成抽象语法树(即AST)，即词法分析与语法分析的过程
• 转换Transform：对于AST进⾏变换⼀系列的操作，babel接受得到AST并通过babel-traverse对其进⾏遍历，在此过程中进⾏添加、更新及移除等操作
• ⽣成Generate：将变换后的AST再转换为JS代码，使⽤到的模块是babel-generator

2. 谈谈你对前端监控的理解

前端监控一般分为三种，分别为页面埋点、性能监控以及异常监控。

页面埋点

页面埋点应该是大家最常写的监控了，一般起码会监控以下几个数据：

• PV / UV
• 停留时长
• 流量来源
• 用户交互

对于这几类统计，一般的实现思路大致可以分为两种，分别为手写埋点和无埋点的方式。

相信第一种方式也是大家最常用的方式，可以自主选择需要监控的数据然后在相应的地方写入代码。这种方式的灵活性很大，但是唯一的缺点就是工作量较大，每个需要监控的地方都得插入代码。

另一种无埋点的方式基本不需要开发者手写埋点了，而是统计所有的事件并且定时上报。这种方式虽然没有前一种方式繁琐了，但是因为统计的是所有事件，所以还需要后期过滤出需要的数据。

性能监控

性能监控可以很好的帮助开发者了解在各种真实环境下，页面的性能情况是如何的。

对于性能监控来说，我们可以直接使用浏览器自带的Performance API来实现这个功能。

对于性能监控来说，其实我们只需要调用performance.getEntriesByType(‘navigation’)这行代码就行了。对，你没看错，一行代码我们就可以获得页面中各种详细的性能相关信息。

我们可以发现这行代码返回了一个数组，内部包含了相当多的信息，从数据开始在网络中传输到页面加载完成都提供了相应的数据。

异常监控

对于异常监控来说，以下两种监控是必不可少的，分别是代码报错以及接口异常上报。

对于代码运行错误，通常的办法是使用window.onerror拦截报错。该方法能拦截到大部分的详细报错信息，但是也有例外

• 对于跨域的代码运行错误会显示Script error。对于这种情况我们需要给script标签添加crossorigin属性
• 对于某些浏览器可能不会显示调用栈信息，这种情况可以通过arguments.callee.caller来做栈递归

对于异步代码来说，可以使用catch的方式捕获错误。比如Promise可以直接使用catch函数，async await可以使用try catch。

但是要注意线上运行的代码都是压缩过的，需要在打包时生成sourceMap文件便于debug。

对于捕获的错误需要上传给服务器，通常可以通过img标签的src发起一个请求。

另外接口异常就相对来说简单了，可以列举出出错的状态码。一旦出现此类的状态码就可以立即上报出错。接口异常上报可以让开发人员迅速知道有哪些接口出现了大面积的报错，以便迅速修复问题。

3. 谈一下你对前端工程化的理解

前端工程化，字面意思理解，就是以工程化方法规范和指导前端日常开发，为前端工作赋能，使其不仅仅局限于应用开发，而是掌控从开发、构建、到发布的完整链路，同时以系统、严谨、可量化的方法助力开发工作，确保开发效率和交付质量。

前端工程化的发展历程是从刀耕火种的原生js时代开始，出于工程化思想，逐渐诞生jQuery框架，bootstrap组件库，grunt，gulp，webpack等构建工具，react、vue等响应式框架应运而生，到现在发展出了更先进的低代码，Serverless等工程理念。

前端框架理念：历经了jQuery，bootstrap插件化，到CMD，ESM等模块化，到如今的React，Vue组件化的过程。

随着node.js的出现和流行，前端构建工具也实现了从任务化的grunt/gulp，发展到现在系统化的webpack，vite等主导工具。

构建工具和前端框架相辅相成，构建工具让前端框架百花齐放，各种类库无缝合作；框架、类库的发展也同时影响了构建工具，比如模块加载方案的演进，CSS预处理，甚至CI/CD一套完整的前端开发流程有：开发->测试->构建->部署->监控

在这五个阶段中工程化的思想均有不同程度的体现，具体表现为：

• 开发阶段：前端工程项目脚手架cli；可复用的UI组件库；第三方包，工具模块；团队代码风格约束eslint和prettier；自动化生成模板路由的工具；以及不得不提的开发阶段构建工具如webpack，可以提供语法校验、打包编译、热更新、包缓存等功能，简化工作流程；
• 测试阶段：单元测试，静态扫描工具，自动化测试工具，网页性能测试工具
• 构建阶段：打包工具进行的代码校验，代码编译，合并压缩代码，拆分代码，图片处理，cdn缓存设置，ssr等极限优化
• 部署阶段：CI/CD持续集成（gitee page，github action）
• 监控阶段工程化：埋点，监控（后台管理系统的登录统计）
• 服务端衔接工程化：主要体现在BFS中间层，Serverless等

分解一下从六个方面回答：

1. 概念字面意思理解，工程化方法；
2. 发展：js,jquery,bootstrap,打包工具，react，vue，Serverless和低代码；
3. node.js的横空出世；
4. 开发流程：开发->测试->构建->部署->监控；
5. 服务端衔接：BFF中间层；
6. 展望未来低代码，Serverless

具体解释：

1. 概念：以工程方法规范和指导前端开发，为前端工作赋能，打通开发，构建，发布全链路
2. 发展历程：刀耕火种原生js -> 提效工具JQuery框架 和 bootStrap组件库 -> grunt，gulp，webpack等构建工具 -> react和vue等响应式框架 -> 面向未来的Serverless理念和低代码构建工具
3. node.js：node.js的产生和流行，是前端工程化的催化剂，在node.js加持下，前端开发工作者可以调用原生API，对构建、开发等过程拥有更多掌控权，催生了构建工具的流行和自动化工具的流行
4. 开发流程：前端工程化之下的一个完整的开发流程是 开发->测试->构建->部署->监控
   • 开发：首先在开发阶段，工程化主要体现在工程项目脚手架cli，可复用的UI组件库，webpack等构建工具支持下，对第三方包和模块的运用，commonjs和esmodule模块化规范，以及代码检查，包括语法检和代码风格分析，css预处理等
   • 测试：单元测试，自动化测试工具，网页性能检测工具
   • 构建：代码校验，编译，压缩丑化，代码分离，cdn配置，ssr优化等
   • 部署：CI/CD持续集成，自动部署
   • 监控阶段：埋点，监控
5. 服务端衔接过程：体现在中间层接口转化，mock数据敏捷开发，Typescript类型约束也算是前后端衔接的工程化体现
6. 面向未来：Serverless（代表作leanCloud）低代码平台等