前端工程化

前端工程化就是遵循一定得标准和规范，通过工具去提高效率和降低成本的一种手段。

有一些头发比较少的同学，可以经历过前端还处于早期的时代。那时没有什么工程化，没有什么前后端分离等现代化前端技术。 日常就是把写页面、套模板、再调一波页面这样日子不知道感觉怎么样

前端工程化解决了什么问题

先说几个我们开发中经常遇到的问题

1. 大家都知道 ES6+ 很好用，新特性是开发更迅速，代码更简洁。日常你们敢用不！这东西是不是有兼容问题啊。

2. 为了提高 CSS 可维护、可扩展、可复用、可编程 我们是不是可以 Less / Sass / PostCss 这些来增强 CSS 的功能。是不是不能在我们常用的运行环境（浏览器）中直接支持啊

3. 想使用模块化来提高项目的可维护行，是不是浏览器也只能歇菜啊

4. 为了提高生产环境中。我们的项目的性能。我是不是要把代码和资源进行压缩啊，然后在手动把处理过后的结果上传到服务器啊。这玩意是不是重复的啊。在之前是不是只能手动操作啊。这就很咸鱼了。还有就是人容易犯错啊，发现没有，机器是不是基本不会犯错啊。

5. 团队进行协作开发时，代码风格是不是只能靠约定啊，约定 这个东西是不是 君子 才遵守啊。像我这种小人。就喜欢总有自己的想法。是不是约定就没法生效了啊。

6. 在进行业务功能开发是不是要等后端同学把接口写好，前端才能开动啊

兼容 IE 都懂吧 😂 是不是很操蛋啊

我忘了在哪儿听到过。一件事重复 3 遍以上就要考虑是不是要用机器来代替人工。而我一直觉得手动超过 2 遍就很操蛋了

主要解决的问题

• 传统语言或语法带来的弊端

• 无法使用模块化 / 组件化

• 重复的机械式工作

• 代码风格不统一、质量无法保证

• 依赖后端服务接口支持

• 整体依赖后端项目

工程化表现

一切以提高效率、降低成本、保证质量的手段都属于【工程化】

一切重复重复的工作都应该被自动化

1. 创建项目

   • 创建基础项目结构
   • 创建特定的类型文件

2. 编码

   • 格式化到吗
   • 校验代码风格
   • 编译 / 构建 / 打包

3. 预览/测试

   • Web Server / Mock
   • Live Reloading / HMR
   • Source Map

4. 提交

   • Git Hooks 代码检查
   • Lint-Staged
   • 持续集成

5. 部署

   • CI / CD
   • 自动发布

是不是在现代化的前端工程化中，工程化 是不是贯穿了我们项目的整个开发周期啊

工程化 不等于 某个工具

• 工程化 ：对项目整体的一种规划或者架构

• 工具 ：落地项目的规划或者架构的一种手段