我的前端工程化历程

所有能降低成本，并且能提高效率的事情的总称为工程化。

对于目前（2018-12-03 23:21:22）的前端开发，需要了解以下几个内容

1. 主流框架 React 、 Vue 等
2. 主流构建工具 Webpack
3. 版本控制工具 Git
4. 自动化部署 GitLab + Ci
5. Eslint + 约定代码规范
6. Nodejs
7. TypeScript 了解一下

二、一路过来

2.1 代码层面

jquery => react

14 年开始接触前端，刚开始就是使用 jquery + 前端三板斧（HTML+CSS+JS），上面就是干。

16 年初，后面就直接开始使用 React 了， 中间还有一些 MVC 框架， backbone，ember，angular 这些了解一点，但是没有实际的项目经验。

2.2 模块化层面

script 引入 =》 requireJs ,seajs => grunt => gulp => webpack, parcel

刚开始代码都是用 script 引入，然后一个项目，引入十几个 js 文件， requrejs 只有在自己的小项目里面用户， grunt 和 gulp 工作中用的就是用来处理 css预处理，图片压缩，代码压缩，雪碧图，上传七牛，svg处理，文件hash处理） ，后面框架优化处理，统一使用 webpack 来进行处理。

2.3 自动化部署

1. 代码 SVN 管理，手动打包代码，生成到 window server 服务器，用 IIS 进行部署

   前端 jquery / flex3，后端.NET

2. 代码 SVN 管理，运维同学通过 jenkins 拉取代码，进行部署

   此时已经用 react，后端 java

3. 代码 GitLab 管理，前端使用 CI + docker + k8s 自动化打包上线

2.4 前后端分离的历程

有合在一起的开发经历，也有分开后的开发经历。

如果项目的页面都很简单，没有什么交互，可以合在一起开发，用模板渲染，对 SEO 有好处，项目维护也还行。

如果项目交互很多，类似后台管理系统，商品购买的流程，有比较多的交互，则前后端分离开发会舒服点。

前后端分离后，请求接口跨域问题如何解决？

如果开发的时候分开，部署的时候合在一起

1. nginx 代理
2. webpack-dev-server proxy 代理
3. 关闭浏览器安全沙箱

   这种方式会携带 cookie，对需要携带 cookie 的友好， 简单粗暴. 仅仅使用于本地开发跨域处理

   https://www.cnblogs.com/zhongxia/p/5416024.html

4. 后端 CROS

   这种方式需要后端支持, 如果后面部署在一起，加这个就没有必要。