「前端工程化」之模块化、组件化

「前端工程化」自动化构建、自动化部署

Posted by Mr Kang on July 10, 2017

引言

模块化

js模块化

在ES6之前,JavaScript一直没有模块系统,这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案,如CommonJS、AMD和CMD等。 现在ES6已经在语言层面上规定了模块系统,完全可以取代现有的CommonJS和AMD规范,而且使用起来相当简洁,并且有静态加载的特性。

js模块一般根据逻辑进行划分,如:ajax、配置config、DOM操作、工具函数utils等。

规范确定了,然后就是模块的打包和加载问题

用Webpack+Babel将所有模块打包成一个文件同步加载

CSS模块化

通常是通过Sass、less等css预处理器的mixin来实现的。

资源模块化

Webpack的强大之处不仅仅在于它统一了JS的各种模块系统,更重要的是它的万能模块加载理念,即所有的资源都可以且也应该模块化。

组件化

  • **组件化≠模块化

模块化只是在文件层面上或者逻辑层面上,对代码或资源的拆分; 而组件化是在设计层面上,对UI的拆分。 从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,我们称之为组件。

组件化理念:

页面上每个独立的可视/可交互区域为一个组件。
每个组件对应一个工程目录,组件所需的各种资源如HTML、CSS、js、图片等都在这个目录下维护
组件与组件间可以自由组合。
现在也有很多支持组件化的框架如React。

规范化 目录结构 编码规范:ESLint 前后端接口规范 ……

自动化
能够使用工具来完成的事情就不要人工来做,使用gulp这种工具来完成工作流中的大部分任务

自动化构建

自动化部署