共计 2575 个字符，预计需要花费 7 分钟才能阅读完成。
1、前端工程化解决的问题
1.1 为什么须要前端工程化？
前端技术倒退更新快，一些大型前端我的项目须要更系统化、更规范化的去组织开发工作；以此来进步对我的项目的开发效率，缩小保护老本。
例如：
咱们做一个电商网站（相似淘宝），它有各种商品页、流动页、详情页、列表页等。它有几个特点：
- 每个页面性能高度相似，但还是有一些差异；
- 它们之间有很多公共依赖；也有一些公共的接口；
- 每个页面都作为一个独立的我的项目由不同的团队或者集体开发。
这时候为了防止凌乱和晋升开发效率，就须要有：
- 对立的开发标准 => 进步代码品质，缩小保护老本
- 对立的文件组织构造 => 清爽好看的目录构造，便于定位问题
- 对立的的模块依赖 => 雷同依赖间接复用，不须要每次新建我的项目都 copy
- 对立的工具配置 => 雷同配置间接复用，公布、打包、上传等工作自动化
- 对立的根底代码 => 雷同代码间接复用，不须要每次新建我的项目都 copy
1.2 前端工程化解决的问题：
传统的前端开发形式存在一些问题，为了晋升整体开发效率并升高代码保护老本；咱们须要实现前端开发工程化，它能解决如下问题：
1、传统语言和语法在各端的兼容性不好；
例如，当初的我的项目通常都是用 es6+ 或者 ts 去开发；而一些政企我的项目中客户（特地是国企的客户）还在用一些老电脑，应用的 IE8、IE9、IE10 等老的浏览器版本不兼容 es6+ 的执行，须要转换为 es5 甚至 es3 到浏览器去执行；
2、一些我的项目无奈应用模块化 / 组件化；
例如，以前做的一个数据可视化我的项目中有大量图表组件；这些图表组件的代码量和数量很多，全部一次加载浏览器速度很慢。所以须要思考图表组件的按需加载，那就须要 webpack 这样的工具来配合做图表的模块化和组件化。
3、反复机械式的工作 / 反复造轮子；
工程化时，咱们能够将反复代码提取成专用的模块或者库供所有人应用，防止反复造轮子；
4、没有代码格调对立、质量保证
在开发中如果没有对立的代码书写标准，那么会造成我的项目开发的凌乱，会在我的项目中遗留很多隐性的 BUG，也会导致前期我的项目保护老本升高。所以咱们通常应用 eslint、csslint 等工具来查看代码书写标准。
5、前后端拆散开发过程中，依赖后端服务反对导致效率低下
当初的我的项目开发中，为了晋升效率和我的项目解耦通常采纳了前后端拆散的形式；然而前端开发和后端开发是同时进行，大概率状况下前端所需后端接口不能及时提供；所以咱们须要应用 mock 等工具本人去模仿接口。
2、前端工程化流程
创立我的项目 => 编码 => 预览 / 测试 => 提交 => 部署
2.1 创立我的项目
在我的项目开发初期，咱们能够实用工具主动创立一些脚手架、模板、通用等文件；还可能创立我的项目构造、创立特定类型文件，例如：
- 创立 vue 我的项目：vue-cli
- 创立 react 我的项目：create-react-app
- 自定义 nodejs cli 利用：依据本人需要实现的工具，能够自定义创立我的项目、生成我的项目形容文件等。
2.2 编码
在正式堆代码的时候，可能会有多人协同开发的场景；这时候须要咱们制订编码标准来束缚开发人员的编码格调，并应用工具来代替人为约定。除此之外，还能够应用一些自动化工具来替咱们主动构建、主动编译打包。
- 格式化代码：prettier
- 校验代码格调：eslint、stylelint
- 编译 / 构建 / 打包 / 模块化：grunt、gulp、fis3、webpack、babel
2.3 预览 / 测试
在开发本地调试的时候，咱们能够应用一些工具来模仿服务器场景并实现热更新、热加载；即代码批改后主动编译构建，浏览器依据变动主动刷新同时还要不便咱们查看源码。
- 本地服务：WebServer / Mock
- 热加载 / 热更新：Live Reloading / HMR
- 源码映射：Source Map
2.4 提交
- Git Hooks：可在提交前进行代码品质和格调的查看
- Lint-staged
- 继续集成
2.5 部署
- 自动化部署：CI/CD
- 自动化集成：Jenkins 能够调用执行脚本，集成自动化构建、打包、部署等
3、罕用的通用脚手架工具
vue-cli —— 创立 vue 我的项目的工具
create-react-app —— 创立 react 我的项目的工具
Yeoman —— 用于创立自定义脚手架的工具
Plop —— 用于我的项目中，反复创立雷同类型的我的项目文件（例如 vue 中某个组件的 js、css 文件）
4、罕用的自动化构建工具
Grunt
- 插件欠缺
- 构建速度慢（每一步都有临时文件读写，步骤越多）
Gulp
- 插件欠缺
- 构建速度更快（没有临时文件，基于内存实现）
- 默认反对多个工作同时执行
- 应用形式更直观易懂
Fis
- 百度开源我的项目
- 大而全的构建工具，集成度高一些
Webpack
- 精确说是模块打包工具，也能够实现自动化构建的性能
5、开发阶段实际计划
例如：咱们要开发一个大型的 vue 我的项目，最根本的前端开发工程化须要如下工作：
5.1. 创立我的项目
- 自定义一个 nodejs cli 利用并公布到 npm 上（办法见后续文章）
- 应用 nodejs cli 利用创立一个我的项目，会生成源码目录构造、模板文件、专用文件、构建工具配置等，例如：package.json、webpack.config.js、eslint.lrc 等
- 应用 nodejs cli 利用主动调用 npm install 等工作（可选）
5.2 编码
- 应用 webpack 进行构建，通过插件 babel 转换 es6+、sass/less、vue 模板代码等
- 应用 webpack 配合 ES Modules/CommJS 标准进行模块化开发
- 应用 eslint、stylelint 进行代码标准查看
- 应用 prettier 进行代码格式化
5.3 预览 / 测试
- 应用 browser-sync、webpack-dev-server 作为本地 web 服务，并进行热更新热加载
- 应用 webpack 配置的 source map 来调试源码
- 应用 webpack 配置的 proxy、Nginx 代理来解决跨域问题
- 应用 mock 模仿 web 服务器的 http 接口
5.4 提交
- 应用 git + github 做代码治理（其它 gitee 或者本人搭的仓库也可）
- 联合 npm scripts、git hooks、lint-staged 在提交代码前进行代码标准查看
5.5 部署
- 应用 Jinkens 调用命令行进行 webpack 打包，而后执行一系列后续操作
- 而后配合其它的工具可主动公布到咱们须要的零碎下来（依据公司需要可自定义）
