2021-02-07

1、谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。

工程化是一个可以提升开发体验、提高开发效率和质量的规划或者工作流架构，一切以提高效率、降低成本、质量保证为目的的手段都属于工程化。例如创建项目阶段使用的 cli 工具；编码阶段格式化代码，校验代码，编译构建打包等工具；预览测试阶段使用 web server/mock/live reloading/source map 等技术；提交代码时使用的 git hooks/lint-staged；部署时使用 ci/cd 自动发布。以上这些都属于工程化。工程化带来的价值或解决的问题：

• 自动化构建

  • 开发时可以使用 ES6+ 新特性，通过工程化的手段将新语法转换成兼容性好的语法，然后发布

  • 可以使用热更新提升开发体验和效率，可以将代码压缩等这样重复机械的工作交给计算机完成

  • 团队协作开发时，可以使用一些编码规范检查的工具，使得项目代码风格统一，质量得到保证

  • 可以使用 Mock.js 这样的插件完成假数据的编写，开发阶段时，让前端可以不依赖后端接口去完成相应工作

• 脚手架：一切重复的工作都应该自动化，提高开发效率

  • 在创建项目阶段，使用脚手架自动构建项目结构

  • 编码时，格式化代码统一代码风格，使用一些自动编译工具，允许我们使用新语法新特性提高开发效率

  • 预览/测试，借助 web server 工具热更新，mock 编写假接口

  • 部署，编写部署脚本，一行命令就能实现打包部署到线上

  • 重复的机械工作，比如部署上线前需要手动压缩代码及资源文件，部署过程需要手动上传代码到服务器。

• 组件化：web 组件化，通过自定义标签对 ui 层面的代码进行拆分，提高代码的复用性

• 模块化

• 保证质量：代码合并压缩，混淆加密，减少了网络请求的时间，webpack-dev-server 的热加载，解决了刷新手动刷新浏览器查看修改的代码效果，极大的提高了开发的效率

2、你认为脚手架除了为我们创建项目结构，还有什么更深的意义？

• 提升效率，可以快速搭建一个基础项目架构

• 规范化 对技术选型、项目结构等做一些规范，以降低沟通成本

• 脚手架可以帮我们快速生成项目，创建项目基础结构。不仅是创建项目基础结构，更重要的是给开发者提供一种约束和规范，例如：相同的组织结构，相同的代码开发范式、相同的模块依赖、相同的工具配置，相同的基础代码。更加利于代码维护与团队开发。