Question

如何实现前端工程化和静态资源的管理

Answer 1

提升开发体验
我们主要从以下三个方面来提升我们的开发体验。
规范化
当团队人员不断扩充时，我们需要制定统一的规范来对平时的开发工作做出一定约束和指导。统一的规范包括前端的代码规范，根据规范定义好一套代码检查的规则，在代码提交的时候进行检查，让开发人员知道自己的代码情况。
同时，根据以往的开发经验，我们制定了统一的项目框架，根据业务功能不同，将一个项目(app)拆分成不同的业务模块(module)，而每一个模块都包含自身的页面(page)以及构成页面所需要的组件(widget)，每一个项目涉及到app、module、page、widget这些已经约定好的概念，这样让项目结构更加清晰，而且让团队内不同业务的人员之间切换无障碍。

组件化
在项目中引入组件化的概念，这里的组件对应上文讲到的widget，每一个组件都会包含组件自身的模板、css、js、图片以及说明文件，我们使用组件来拼装页面，像搭积木一样来拼装我们的页面，同时一个组件内可以调用另一个组件。

在拿到设计稿后，我们首先需要确定哪些需要做成公共组件，那些是要做成独立组件，以及组件间如何进行通信。在页面中调用这些组件后，会自动加载组件的模板以及组件的静态资源，而当组件不再需要时，只要移除掉组件引用，那么相应的模板和静态资源也会不再加载。
组件化的好处主要有这么几点
管理方便，我们可以把一个独立功能相关的文件在工程目录中放在一起，这样代码管理起来会非常便利
组件复用，通过抽取公共组件，可以实现组件复用，从而减少工作量，创造价值
分而治之，这是组件化最重要的一点，将页面组件化，就是对页面功能的拆分，将一个大的工程拆成小的零件，我们只需要关注每一个零件的功能，极大地降低了页面的开发与维护的难度
自动化编译
在前端开发中，我们总是会去使用很多工具、手段来优化代码、提升开发效率，例如，我们会使用sass、less等CSS预处理工具来编写更好维护的样式代码，我们也会使用CSSLint、eslint等代码检查工具来检查代码的语法错误，使用文件合并压缩等手段来减少资源大小，除此之外我们还会去做雪碧图合并、多倍图处理、字体压缩处理、代码发布等等。
曾经有大神说过，超过90s的工作都应该自动化掉。而以上所有的这些工作，贯穿我们整个开发流程，但是不同工具的切换不但显得凌乱，而且影响开发效率。在自动化、工程编译的思想早已深入人心的当下，我们当然也要紧跟潮流，所以我们考虑通过自动化手段来提升我们的效率，让所有操作可以一键式开速执行完。
我们将通过定义好一系列的编译任务，按照一定顺序依次对我们的项目自动进行编译操作，最后产生出可上线的代码。