本阶段我们将彻底进化为优秀的前端工程师，能够进行企业级的web工程开发。我们将深入探究框架，打包器，熟练对代码进行测试，风格审查等。

阶段目标概述

在阶段三中，为了成为企业级的前端工程师，有必要学习业界主流的框架及工具。

目前占据前端开发主流的框架有三个（都是组件式开发，务必转变思维）：

  • Vue.js（上手简单，目前中小型公司用的比较多，Vue3全面支持TS）
  • React.js（独创JSX，上手难度不高，但很灵活，目前在大型公司中的使用率比Vue高）
  • Angular（企业级前端框架，做出来的项目应该是维护性最高的，但国内使用人数较少）

虽然推荐使用Vue.js，然而考虑到就业情况，我们选择先学习React.js。
围绕React.js展开的生态，纷繁复杂，我介绍一下目前主要的一些技术架构：

  • React全家桶：React.js + React-Router + Redux.js （数据层）+ 围绕Redux的一系列库 推荐指数：⭐️⭐️
  • Umi 企业级前端应用框架 推荐指数：⭐️⭐️⭐️⭐️
  • React.js + React-Router + MobX（数据层） 个人认为比React全家桶好用 推荐指数：⭐️⭐️⭐️⭐️

这三种架构中Umi是比较靠谱的，适合企业级开发，而其他两种多少需要自己去配置和管理。不过话说回来，在初学阶段，个人建议还是自己从零搭建框架比较靠谱。

除了了解应用架构，更底层的Webpack也是必学的。因为Webpack是目前生态最丰富的打包器，可以解决各种前端工程化问题，例如CSS Module （对，React领域很能折腾CSS），SVG转换为React组件等等。总而言之Webpack是前端工程化的基石之一。

代码风格，单元测试，端到端测试也是前端工程中的重要议题。

代码风格能够有效规范团队代码，减少普适性错误。JS领域的主要代码风格检查工具是ESLint，而比较出名的代码风格有Airbnb的JavaScript编程规范，JavaScript标准代码风格，我们可以通过ESLint配置这两种风格，也可以自行配置属于自己的代码风格。此外我们使用Stylelint对CSS的代码风格进行规范。

JS的单元测试框架也有很多，具体可以看看JavaScript单元测试框架，个人推荐Jest。虽然可能因为普通业务开发中，我们可能不会进行单元测试，但是对于一些通用代码以及类库代码，请务必进行单元测试。

端到端测试前端工程师用的相对比较少，前端领域的端到端测试框架我们主要推荐：

  • Cypress 推荐指数：⭐️⭐️⭐️⭐️⭐️
  • Selenium 推荐指数：⭐️⭐️⭐️⭐️

个人认为端到端测试，前端工程师虽然不用精通，但须了解。

最后，TypeScript将是本阶段的学习重点之一，TypeScript是转义为JS的语言，相当于为JS添加了类型。除了可以减少代码错误，还可以通过智能提示提升开发效率，是前端开发的利器。

本阶段的最终目标是将你培养成优秀的前端工程师。

基础

基础教程推荐

本阶段不适合推荐书籍，最佳的方式还是通过各种官方文档进行学习，这也可以认为是一种能力。另外搭建框架时，最好的方式是模仿别人，拉取别人已经搭好的框架，结合文档学习其配置方法会有比较好的效果。

日常作业

  • 将React学习笔记公开在博客上
  • 将Webpack学习笔记公开在博客上
  • 将TypeScript学习笔记公开在博客上
  • 其他工具学习笔记根据自己要求公开在博客上

基础小作业

这两个小作业并没有先后顺序，你可以在重写工具时，搭建React脚手架，并将其提取成模板，供下一个使用

基础大作业

进阶小作业

进阶大作业

高阶

高阶教程推荐

高阶大作业