熊节:极限追问 034
【前端工程怎么自动化？】
背景:说起前端开发好像就是关于CSS和页面效果，其实前端也有很多工程技术实践。
分问题1:前端开发中有哪些工作应该自动化？
分问题2:你在工作中使用了哪些前端自动化工具？
Page
【前端工程怎么自动化？】
背景:说起前端开发好像就是关于CSS和页面效果，其实前端也有很多工程技术实践。
分问题1:前端开发中有哪些工作应该自动化？
在之前的工作中主要接触过一下几方面的自动化的部分。
1，项目初始化 2，构建 3，规范检测 4，pipline 5，多渠道打包 6，发布上线 7，JSON代码转换
分问题2:你在工作中使用了哪些前端自动化工具？
之前做前端的时候，当时的一些自动化处理，主要是用这些工具
1，使用yarn来构建新的项目和管理依赖 2，eslint, tslint来做代码检测，结合git hook来触发一些关键点的代码检测，例如push时运行代码检测和执行UT； 3，JSON代码转TS对象也经常用到，主要是一些在线工具。 4，Docker来构建项目Image。 5，其他需要自己编写脚本来完成或者使用公司内现有的服务来完成相应的功能。
哎呦迪奥
极客学院链接
现在的前端开发已经不再仅仅只是静态网页的开发了，日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂，更加的不易于管理。 模块化开发和预处理框架把项目分成若干个小模块，增加了最后发布的困难，没有一个统一的标准，让前端的项目结构千奇百怪。前端自动化构建在整个项目开发中越来越重要。 那么今天的极限拷问来了： 1、前端开发中有哪些工作应该自动化？ 2、你在工作中使用了哪些前端自动化工具？ **
前端工作中，重复性劳动或者容易出错的工作应该选择自动化，比如开发阶段的热更新、单元测试、部署阶段的压缩打包，分包加载、服务端构建等。 细分来讲，更应该进行自动化的工作有：
- 项目初始化；
- 构建；
- 代码的美化和规范检测；
- 单元测试、集成测试、端对端测试；
- pipline；
- 多渠道打包；
- 发布上线；
- JSON代码转换；
- 组件化、模块化、插件化；
那么以上前端的一些自动化处理，主要是用这些工具：
- 使用 yarn 来构建新的项目和管理依赖；
- eslint , tslint 来做代码检测，结合 git hook 来触发一些关键点的代码检测，例如 push 时运行代码检测和执行 UT；
- JSON 代码转 TS 对象也经常用到，主要是一些在线工具；
- Docker 来构建项目Image；
- webpack/gulp 自动化构建工具，用于本地开发构建；
- Jenkins 服务器端构建工具，用于部署上线；
- Rollup 轻量级构建工具，用于构建库文件；
- Make 构建一些非标准的前端项；
- 其他需要自己编写脚本来完成或者使用公司内现有的服务来完成相应的功能。
回忆以下，之前是如何来开始做一个项目的呢？ 首先要确定这个项目要使用什么样的技术来实现，然后开始规划我们的项目目录，接着就要往项目增加第三方库依赖： 拷贝 CSS库（Yui Reset | bootstrap）JS库（Requiet.js | Seajs | jQuery | jQuery插件 ） 进相应目录（拷贝 N个文件，花费N分钟）
然后进行编码： 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 …………
最后，进行语法检查、文件合并和压缩： HTML去掉注析、换行符 - HtmlMin CSS文件压缩合并 – CssMinify JS代码风格检查 – JsHint JS代码压缩 – Uglyfy image压缩 - imagemin 整个过程都在重复无用繁琐的工具。渐渐的，一些自动化构建工具出现了，人们开始使用工具来构建一个本地的开发环境。自动化构建已经成了前端开发的趋势，所以学好自动化构建也就是为自己的开发打下了良好的基础。
讨论时间
究竟什么才是 UI 组件？ 有群友在群内提出了最近困扰已久的问题：
▲【极限编程中国 | 实践者】成员分享
熊老师建议，想要搞清楚这个问题，那么率先明白什么是「UI组件的行为」、什么是「UI组件」，不然从何谈起组件行为、组件行为测试、组件行为测试自动化？ 那么又如何判定是不是「组件化」呢？ 组件化是一种组织代码的方法，它呈现的最终结果其实和非组件化的页面毫无差别，所以不适合从页面截图上判断是不是组件化。 那么大家有没有什么好的建议呢？
若有收获，就点个赞吧
0 人点赞
