我对前端工程化的理解(未写完)

最近在日常工作中我发现很多重复性的操作可以用工具或者写个脚本来搞定,比如以前构建一个项目是靠手动创建的,现在我们可以通过vue create hello-world创建一个vue项目 npm init -y 初始化一个包管理文件 parcel index.html 打包项目与浏览器热更新,使用ESlint校验js文件是否规范,使用Karma测试代码等等,如果把工作流程中使用的这些工具规范一下就很符合我们的前端工程化了。

模块化

前端模块化的好处是为多人合作提供了便利,早期的模块化是使用了CommonJS、AMD和CMD或者框架自带的模块机制来实现,现在ES6已经在语言层面上规定了模块系统,完全可以取代这些第三方模块化的包。

自动化

由于前端的自动化的概念比较新,本人对自动化的理解并不深,只能粗略讲下个人理解和我用过的。

  1. 本地机器上写代码
  2. 提交代码,push 到 git 远程仓库
  3. git hook 触发 持续集成工具自动构建项目(自动化构建)
  4. 持续集成工具中拉取项目代码,运行 npm run unit 和 npm run build,如果失败,发送邮件通知相关人。(自动化测试)
  5. 持续集成工具 中执行测试服务器的部署脚本 (自动化部署)

持续集成:使用 自动化构建:使用webpack,parcel,gulp 自动化测试:使用Karma + Mocha + Chai 自动化部署:shell脚本,node的script脚本,