我的前端工程化历程

一、什么是工程化

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

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

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

二、一路过来

2.1 代码层面

1
jquery => react

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

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

2.2 模块化层面

1
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

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