为了解决传统开发的弊端，前端也开始引入工程化开发的概念，借助工具来解决人工层面的繁琐事情。
1. 开发层面的优势
在开发层面，前端工程化有以下好处：
- 引入了模块化和包的概念，作用域隔离，解决了代码冲突的问题。
- 按需导出和导入机制，让编码过程更容易定位问题。
- 自动化的代码检测流程，有问题的代码在开发过程中就可以被发现。
- 编译打包机制可以使用开发效率更高的编码方式，如Vue组件、CSS的各种预处理器。
- 引入了代码兼容处理的方案(如Babel)，可以自由使用更先进的JavaScript语句，而无须顾忌浏览器兼容性，因为最终会转换为浏览器兼容的实现版本。
- 引入了Tree Shaking机制，清理没有用到的代码，减少项目构建后的体积。
还有非常多的体验提升，这里就不一一列举了，而对应的工具，根据用途也会有非常多的选择。
2. 团队协作的优势
除了对开发者有更好的开发体验和效率提升外，对于团队协作，前端工程化也带来了许多的便利，如下面这些场景：
2.1 统一的项目结构
以前的项目结构比较依赖工程师的喜欢，虽然在研发部门里一般都有”团队规范”等约定，但靠自觉性去配合的事情，还是比较难做统一，特别是项目赶工期的时候。
工程化后的项目结构非常清晰和统一。
以Vue项目来说，通过脚手架创建一个新项目之后，它除了提供能直接运行Hello World的基础代码之外，还具备如下的统一目录结构。
- src：源码目录
- src/main.ts：入口文件
- src/views：路由组件目录
- src/components：子组件目录
- src/router：路由目录
虽然也可以自行调整成别的结构，但根据笔者多年的实际工作体会，以及从很多开源项目的代码里看到的，都是沿用脚手架创建的项目结构(不同脚手架创建的结构会有所不同，但基于同一技术栈的项目基本上都具备相同的结构)。
2.2 统一的代码风格
不管是接受其他人的代码或者是修改自己不同时期的代码，可能都会遇到这样的情况；
一个模板语句上面包含了很多属性，有的人喜欢写成一行，属性多了维护起来很麻烦，需要花费较多时间辨认。
<template>
<div class="list">
<!-- 这个循环模板有很多属性 -->
<div class="item" :class="{'top-${index+1}':index<3}" v-for="(item,index) in list":key="item.id"@click="handleClick(item.id)">
<span>{{ item.text }}</span>
</div>
<!-- 这个循环模板有很多属性 -->
</div>
</template>而工程化配合统一的代码格式化规范，可以使不同人维护的代码，最终提交到Git上时风格都保持一致，并且类似这种很多属性的地方，都会自动格式化为一个属性一行，维护起来就很方便。
<template>
<div class="list">
<!-- 这个循环模板有很多属性 -->
<div class="item"
:class="{'top-${index+1}'
:index<3}" v-for="(item,index) in list"
:key="item.id"
@click="handleClick(item.id)">
<span>{{ item.text }}</span>
</div>
<!-- 这个循环模板有很多属性 -->
</div>
</template>
<script lang='ts' setup>
</script>
<style scoped>
</style>同样地，写JavaScript时也会有诸如字符串用双引号还是单引号、缩进是用Tab还是用空格、如果用空格到底是要四个空格还是两个空格等一堆”没有什么实际意义”，但是不统一的话协作起来又很难受的问题。
在工程化项目中，这些问题都可以交给程序去处理。
在书写代码的时候，开发者可以先按照自己的习惯书写，然后再执行命令进行格式化，或者是在提交代码的时候配合Git Hooks自动格式化等，都可以做到统一风格。
2.3 可复用的模块和组件
传统项目比较容易被复用的只有JavaScript代码和CSS代码，会抽离公共函数文件上传到CDN，然后在HTML页面里引入这些远程资源。
HTML代码通常只有由JavaScript创建的比较小段的DOM结构。
通过CDN引入的资源，很多时候都是完整引入的，可能有时候只需要用到里面的一两个功能，却要把很大的完整文件都引用进来。
这种情况下，在前端工程化里，就可以抽离一个开箱即用的npm组件包。
并且很多包都提供了模块化导出，配合构建工具的Tree Shaking，可以抽离用到的代码，没有用到的其他功能都会被抛弃，不会一起发布到生产环境。
2.4 代码健壮性有保障
传统的开发模式里，只能够写JavaScript。
而在工程项目里，可以在开发环境写带有类型系统的TypeScript，然后再编译为浏览器能认识的JavaScript。
在开发过程中，编译器会检查代码是否有问题，如在TypeScript里声明一个布尔型的变量，然后不小心将它赋值为数值：
<script lang='ts' setup>
//声明一个布尔型变量
let bool: boolean = true
bool = 3
</script>编译器检测到这个行为的时候就会抛出错误：
不能将类型“number”分配给类型“boolean”。ts-plugin(2322)从而得以及时发现并修复问题，减少线上事故的发生。
2.5 团队开发效率高
在前后端合作环节，可以提前Mock接口与后端工程师同步开发。
如果遇到跨域等安全限制，也可以进行本地代理，不受跨域困扰。
前端工程在开发过程中，还有很多可以交给程序处理的环节，如前面提到的代码格式化、代码检查，还有在部署上线的时候也可以配合CI/CD完成自动化流水线。
不像以前改个字都要找服务端工程师去更新，可以把很多的人力操作剥离出来交给程序。