前端Jeek

前端工程化

2020/12/7 工程化

🌙 前端工程化

🌙 1.什么是前端工程化？

前端工程化实质将前端开发的流程规范化、标准化，包括开发流程、技术选型、代码规范、构建发布等，用于提升前端工程的开发效率和代码质量。

我理想中的前端工作流 (opens new window)

腾讯IVWEB前端工程化工具feflow思考与实践 (opens new window)

🌙 2.为什么要做前端工程化？

  • 复杂度高：前端项目的多功能、多页面、多状态、多系统

  • 规模大： 团队开发，多人协作，代码质量管理

  • 要求高：页面性能化（CDN/异步加载/请求合并），CSS兼容性、单页面应用、服务端渲染。。。

🌙 3.怎么实现前端工程化？

  • 从业务着手： 简单的单页面应用，使用gulp打包 + 同步工具实现开发全流程

  • 从复杂度考虑： jenkins、git/gitlab、webpack、React/Vue/Angular

  • 从已知向未知扩展： 不同的技术有不同的适应点，选择合适的才是最好的

🌙 4.推荐

  • 组件化/脚手架/工程CLI工具

  • Git Flow

  • webpack

  • Jenkins + Docker

🌙 5.使用webpack打包

🌙 6.使用gulp打包

🌙 使用Browsersync热刷新

---省时的浏览器同步测试工具： Browsersync可以同时在PC、平板、手机等设备下进行调试

Browsersync + Grunt.js结合使用 (opens new window)

🌙 7.使用Yeoman编写CLI

Yeoman官网 (opens new window)

generator-generator (opens new window)

  • 安装

    npm install -g yo
npm install -g generator-generator
    1
    2

CRA CLI: reate react app 核心思路分析 (opens new window)

前端工程化建设 (opens new window)

All in one：项目级 monorepo 策略最佳实践 (opens new window)

前端工程化-CLI