01前端工程化的背景

随着业务的扩展、业务需求更加复杂、项目团队的壮大以及项目的增多等。制定一套适用于团队的前端工程化方案很有必要。

02前端工程化是什么

前端工程化是一个很广泛的话题。涉及的技术与解决方案非常丰富。从一个前端工程的生命周期来看它是这样的：

如果在这些阶段中实现了在性能、稳定性、可用性、可维护性等方面的系统化、量化、严格约束等工作，即称项目在工程化。工程化度越高，那么因人为或个体导致的缺陷与短板相对减少，从而有效保障项目的质量。而过程之间是相辅相成，非完全分割。

03如何前端工程化01模块化

复杂逻辑分割成相对独立模块，各个模块内部数据私有并向外部暴露接口以实现模块间通信。

JavaScript模块化

从namespace的简单封装，到IIFE模式，用匿名函数闭包来实现隔离与引用，再到CommonJS、 AMD、 CMD、UMD、ES6 Module模块化规范的出现。

CommonJS：规定每个文件一个模块，有自己的作用域不会污染全局；使用require同步价值依赖的模块，通过module.exports导出接口；多次require同一模块只在第一次加载时运行，缓存结果；node环境可直接执行。

AMD：使用define关键字定义模块，require关键字使用模块；可异步加载模块。常用在浏览器端，但需要第三方库支持，否则不能在原生Javascript环境运行。

CMD：与AMD类似。

UMD：兼容AMD和CommonJS，使用它既可以在浏览器也可在Node环境运行。

ES6 Module：从语言标准层面实现模块化，由ECMA提出的标准，后续浏览器和Node都可能会原生支持，受开发者喜爱。Import引入，export导出模块；模块只是只读引用，在调用的地方执行，有别于CommonJS在require的时候就会执行代码。在浏览器中通过script脚本引入：

defer会同步加载模块，async反之。

CSS模块化

CSS的语法与核心机制一直以来没有本质变化，它不具有高级编程属性比如无法使用变量、运算、函数以及无法管理依赖，全局作用域使得开发者需要处理优先级、样式名字等问题。因此，为CSS赋予编程能力的一些编译工具和开发方案“应运而生”。

预处理器：当页面多而复杂时，为了更好维护和便于开发，常常将CSS文件切分，根据具体的需要再将文件合并。常用的预处理器如LESS、SASS、Stylus。它们不能完全解决全局作用域的问题，需要结合namespace的思想。

OOCSS & SMACSS：OOCSS即面向对象的CSS，目的在于编写可复用、低耦合和可扩展的CSS，有分离结构和主体和分离容器和内容两个原则；SMACSS即可扩展模块化的CSS，核心是结构化CSS，有CSS分类规则、命名规则、最小适配深度原则。

BEM：该命名规范，旨在解决命名样式名的全局冲突问题。BEM分别是Block、Element和Modifier的简写。

Block是一种布局或者设计上的思想，每个Block拥有一个命名空间(前缀)；

Element是Block的后代，和块一起形成一个完整的实体；

Modifier代表一个块的状态，表示它持有的一个特定属性。

选择器不允许使用id，一律使用类名，使用三种符号表示扩展关系：中划线(-)：仅做连字符，表示块或子元素的多单词间的连接标记；单下划线(_): 描述一个块或块子元素的一种状态；双下划线(__): 连接块和块的子元素。

缺点：遵守BEM规范会使类名很长，导致对CSS文件压缩时，无法更大的优化；这种规范需要团队开发者自行遵守，无法有效保障；该规范的命名还可能与第三方库的命名发生冲突。

CSS IN JS：该方案彻底抛弃了CSS，它规定用JS来编写CSS。

CSS Module：CSS Module最大化结合现有CSS生态和JS模块化，以前的CSS技术都可继续使用。以webpack为例，webpack配置文件的css-loader、scss-loader、less-loader配置以实现CSS Module。

02组件化组件化就是将页面拆分，独立成组件，组件可以相互组合成复杂的组件。组件会将数据、视图和逻辑封装，并导出该组件以供其它组件调用。由于调用者不需要关注组件的内部实现，很大程度上降低系统组件间的耦合，相应提升组件内部的聚合性。React使用灵活的JSX语法，与JS的作用域一致。Vue、Angular采用模板DSL，可编程性受到限制，作用域和JS隔离。Web Component：W3C为组件化而创建的标准。一些特性可以解决作用域问题，如下三个特性：

• Custom Element带有特定行为且是用户自命名的HTML元素；
• Shadow DOM对标签和样式的一层 DOM 封装，可以实现局部作用域，当设置{mode: closed}后，只有其宿主才可定义其表现，外部的api是无法获取到Shadow DOM中的任何内容，宿主的内容会被Shadow DOM掩盖；
• HTML Template & Slots可复用HTML标签，对外提供slot接口，提高组件灵活性。

03规范化

可有效降低团队中个体差异，通过严格执行代码规范、文档规范、流程规范以保障项目高质量。

代码规范

统一代码风格，便于维护等工作。如使用Prettier、ESLint、prop-types库、Flow、TypeScript等工具、库或语言。

文档规范

好的项目文档可以提高团队协作效率，便于维护。好的文档工具可以极大减少人工保证代码和文档一致性工作。如JSDoc 根据.js文件中的注释信息，生成API文档；Docz 基于MDX的高效、零配置的文档生成工具，目前支持React；Storybook：集组件开发、查看、测试的文档工具。

流程规范

团队开发，常使用版本控制系统管理项目，如svn、git。代码拉取、代码合并、版本发布有相应流程规范是极好的。

常见流程规范如github-flow、git-flow、gitlab-flow。

github-flow

以部署为中心的开发模式，持续且高速安全地进行部署，流程如下：

1.master分支一直是可部署的状态，不能直接在master分支进行push操作；2.每次开发都从master分支创建一个新的特性分支，命名有含义；3.在远端创建对应的origin/特性分支，定期push；4.开发测试完毕后需要merge的时候，创建Pull Request进行交流；5.其它开发者review这次Pull Request，确认后与master分支进行合并；6.部署合并后的master分支代码，删除该分支；

github-flow的最大特点就是简单，只有一个master长期分支，但是由于要持续部署，当一个部署还未完成的时候，往往下一个Pull Request已经完成，这就导致在开发速度越来越快的时候，必须要让所需的一系列部署流程都是自动化的，比如有自动化测试、接入CI等。

git-flow

有两个长期分支master和develop，不能直接push代码到这两个分支，开发者都在feature分支进行。

功能开发：首先从develop分支创建特性分支，后面的流程和github-flow类似，开发测试完毕向develop发起Pull Request，其它开发者review完毕后将此次PR合并到develop分支。

管理Release：当develop分支可以release的时候，首先创建一个release/版本号分支，然后对这个release分支打上tag后再合并到develop和master中去。

Hotfix：当出现了紧急bug的时候，需要开启“hotfix”流程，和release不同的是，这个hotfix分支是基于master创建的，修复bug后提交到这个hotfix分支，然后又和release分支的处理非常类似，改动会被同时合并到develop和master中去，最后这个hotfix分支被删除掉。

gitlab-flow

github-flow要求master分支和生产环境是完全一致，一旦PR通过被合并到了master分支，就要立刻部署发布到生成环境，但是往往受限于产品发布时间，master分支很可能会先于生产环境，这个时候不能依靠master分支来追踪线上的版本。

git-flow的流程比较复杂，需要维护两个长期分支master和develop，开发过程要以develop分支为准，但是很多开发工具将master当做默认分支，就需要频繁切换分支。git-flow的模式是基于“版本发布”，这对一些持续发布部署的项目不太适用。

gitlab-flow则是上面两个工作流的综合，推出“上游优先”的最大原则，即只存在一个master主分支，它是所有分支的上游，只有合并到master上的代码才能应用到其他分支。

04自动化

可有效减少重复的工作，提高工作效率。包括代码构建、代码测试、CI(持续集成)/CD(持续交付/部署)以及DevOps(开发运维一体化)。

代码构建：项目中引入了模块化、组件化还有一些开发框架，需要对项目进行构建。包括代码转换、模块合并、文件优化、自动刷新等。

代码测试：在应用的生命周期里，不同的测试阶段，针对的问题不一样。单元测试确保每个组件和模块正常；集成测试在单元测试的基础上确保组装成模块、子系统或系统的过程中各部分正常；系统测试在集成测试的基础上确保整个应用运行正常；验收测试或称交互测试是针对用户需求、业务流程进行的正式的测试达到验收标准为目标。

测试环境有如jsdom、 puppeteer；测试工具有如Macha、Jasmine、Jest、AVA等；测试平台如Karma，模拟浏览器运行JavaScript，可生成测试报告。

CI/CD：CI防止分支偏离主干太久，持续集成实现产品快速迭代，由于需要频繁集成，自动化构建、代码检查与测试的实现是CI的核心。CD是CI的下一步，它的目标是拥有一个可以随时部署到生产环境的代码库。持续部署是持续交付的延伸，实现自动将应用发布到生产环境。

DevOps：Development和Operations的组合，是一种方法论，促进应用开发、维护和质量各个部门间的沟通、协作与整合。

参考文献

• 前端模块化详解(完整版)

  https://juejin.im/post/6844903744518389768

• 我对前端工程化的理解

  https://juejin.im/post/6844903464489713672

• 浅谈 CSS 预处理器(一)：为什么要使用预处理器？

  https://github.com/cssmagic/blog/issues/73

• CSS BEM 书写规范

  https://github.com/Tencent/tmt-workflow/wiki/%25E2%2592%259B-%255B%25E8%25A7%2584%25E8%258C%2583%255D--CSS-BEM-%25E4%25B9%25A6%25E5%2586%2599%25E8%25A7%2584%25E8%258C%2583

• CSS Modules使用详解

  https://imweb.io/topic/586519b1b3ce6d8e3f9f99aa

• 深入探讨前端组件化开发

  https://juejin.im/entry/59f84b9d5188253bd85cad9b

• CSS-in-JS，向Web组件化再迈一大步

  https://insights.thoughtworks.cn/css-in-js/

• jsx与模板dsl的优劣思考

  https://zhuanlan.zhihu.com/p/42726369

• 从年会看声明式编程(Declarative Programming)

  https://zhuanlan.zhihu.com/p/26085755

• React & Web Components

  https://zh-hans.reactjs.org/docs/web-components.html

• The state of Web Components

  https://hacks.mozilla.org/2015/06/the-state-of-web-components/

• 用 husky 和 lint-staged 构建超溜的代码检查工作流

  https://segmentfault.com/a/1190000009546913

• JEST

  https://jestjs.io/

• 值得参考的css理论：OOCSS、SMACSS与BEM

  https://segmentfault.com/a/1190000000704006

• 浅谈 shadow dom 中的 template 和 slot

  https://www.jianshu.com/p/9293cac60920

• GitHub Flow & Git Flow 基于Git 的两种协作开发模式

  https://www.cnblogs.com/sloong/p/5868292.html

• git-flow的工作流程

  https://git-tower.com/learn/git/ebook/cn/command-line/advanced-topics/git-flow

• Git工作流程

  https://ruanyifeng.com/blog/2015/12/git-workflow.html

• Introduction to GitLab Flow

  https://docs.gitlab.com/ee/workflow/gitlab_flow.html

• 软件测试的四个阶段，单元测试、集成测试、系统测试、验收测试

  https://blog.csdn.net/u013800127/article/details/78284049

• The Product Managers’ Guide to Continuous Delivery and DevOps

  https://www.mindtheproduct.com/2016/02/what-the-hell-are-ci-cd-and-devops-a-cheatsheet-for-the-rest-of-us/

• 一文收录16张DevOps ”拍照神图”

  https://mp.weixin.qq.com/s/wCFM6Ln-iG_G-Um8cad0aA

• DevOps漫谈之一：DevOps、CI、CD都是什么鬼？

  https://blog.jjonline.cn/linux/238.html

• Webhook到底是个啥？

  https://segmentfault.com/a/1190000015437514?utm_source=tag-newest

• Webpack中的sideEffects到底该怎么用？

  https://zhuanlan.zhihu.com/p/40052192

• QQ音乐商业化Web团队前端工程化实践总结

往期精彩