前端团队如何作规范

背景和设想

任何团队，规范都是怎么也绕不开的话题，咱们有太多的理由去作规范，同时咱们在作规范这件事上也有太多的痛点，那么有没有这样的一种方式，让规范这一件事情既能很好的落实，又对于咱们的研发效能不会有什么影响？css

任何事情，咱们得知道，到底这件事情的难点在哪里？

一、针对规范自己而言。前端

规范理解不统一的问题。团队中的每个人，对规范的理解是不统一的，好比定义一个常量，有些人喜欢用大写字母，有些人以为不用纠结这个细节。有时候，你们对规范的边界理解，也是不统一的，有些人认为，咱们的规范就是咱们编码层面的规范，有些人认为，规范应当还包括工程层面的东西，好比项目的文件目录结构究竟是怎么样的。node

人力成本的问题。咱们定义了规范，咱们须要遵照相关的规范，那人力成本可能就会增长，好比咱们要求代码结尾须要有分号，有些时候咱们忘了加这个分号，咱们要求要遵循驼峰命名，可是有时候就没有遵循。因此咱们须要作代码review。git

落地难的问题。每一个人都有本身的编码习惯，统一的风格一定会致使团队内部的差别性。项目周期会有紧有松，致使真实落地的时候，就会出现现实与理想的割裂感。npm

二、针对团队来讲json

咱们可能会有这么一些问题：咱们的团队技术栈不统一，不少公共的建设无法开展；团队中没有完善的文档建设，你们无法造成一个统一的规范共识；规范落地的过程，难度很大，成本很高；在规范相关的制度上，咱们可能也没有相关的制度保障。小程序

关于规范，咱们云积分的设想

如上图所示markdown

咱们云积分针对规范，把规范划分为三层，分别是规范的定义、规范的模板、规范的工具。工具

一、规范的定义

规范包含的内容，多种多样，好比有针对GIT的规范、CSS的规范、JS的规范等等。编码

咱们把这些规范定义下来，直接经过第三方工具，自动化进行代码的lint校验、COMMIT Msg校验等等。

原理是什么呢？原理就是咱们把这些基础的规范，在GIT提交的周期钩子中，先进行校验经过，经过了以后，才能commit成功。同时咱们提供相关的命令行工具，直接针对咱们不规范的代码，直接格式化的处理，尽最大的可能性，减小人工在这个过程当中的精力耗费。

二、规范的模板

咱们云积分是这么理解规范的，就是所谓的规范，必定是某个项目的规范，咱们须要针对咱们定义的全部规范，直接集成到咱们的项目模板中。

好比在一个Vue的模板仓库中，咱们针对这个仓库，集成了GIT COMMIT校验、ESlint校验、Stylelint校验、目录结构的预约义、相关的公用库的选择、本身团队内部的组件库、工具库等等。

在每次开发的时候，咱们直接在这样的模板上，进行二次开发。

三、规范的工具

针对团队状况的不一样，咱们可能会有不一样的模板仓库，咱们这个时候，须要对这些集成的模板仓库进行管理。咱们指望的状态，直接经过命令行，一键式生成本身想要的模板。（而不是我每次要进行从某个仓库拉一个项目的模板）

这个规范工具不只仅能够对模板进行初始化，也能直接进行页面的添加（表单页、列表页、详情页），也会进行一些插件的集成（好比咱们针对Stylelint，咱们但愿直接命令行式直接添加到项目中）。

固然，咱们团队中的node工具，确定不只仅止于此。

规范的介绍

那么针对一个团队，咱们须要从哪些方面对团队进行规范的定义呢？我的认为，规范的推动，是一个长期的事情，咱们总会遇到新的场景，在新的场景中处理新的规范问题。

规范的内容

规范的大图以下：

固然，这仅仅是关于规范的内容的一个抛砖引玉，相关的东西其实更多，更复杂。

好比：埋点规范、监控规范、公用组件库、公用工具库、公用Reset css等等。这些东西须要团队内部进行建设。在这些基础能力建设之上，咱们才能进一步的作规范。

规范的模板

规范模板就是咱们把相关的规范，都定义下来，直接集成到一个模板仓库中。

给你们一个实例

根目录结构：

src下的目录结构：

package.json的自动校验部分：

工具介绍

在咱们的设想中，咱们的工具应该承担三部分的内容：

一、针对一个模板仓库的初始化。

二、针对某个模板的页面进行初始化。

三、给这个项目添加和集成相关的插件。

这里所谓的插件，就是对于一个项目的规范中某一块单独的功能，进行添加。

cli工具原理

原理这一块，须要前端对node作工具备一些基本的认知，咱们必需要知道。

发布一个npm包：它的核心就是package.json中的一个mian属性，对应的js文件。对外提供的能力。

发布一个cli工具：它的核心就是package.json中的一个bin属性，须要执行的一个js文件。

一、初始化一个模板。

原理就是咱们直接把作好的模板，直接用命令行进行加载。

commander：命令行交互的一个node包。

download-git-repo：对git上的代码进行下载的一个node包。

二、添加一个页面。

原理就是针对咱们提早定义好的一些页面，直接进行copy，而后放到咱们的项目目录里面。或者用到以前提早定义好的模板，进行文件读取操做，替换相关的内容。

三、添加一个插件

本质就是针对当前仓库，读取仓库内容，添加咱们已有的能力。

好比我读取到已经初始化的一个模板中，没有eslint的能力，那么我能够直接在这个模板仓库中，添加一个eslint，这个eslint是咱们定义的规范的规则，同时也能在git周期钩子中进行校验代码。

将来展望

咱们团队已经作了至关一部分的工做了，包含规范、模板、以及工具层面。可是整个公司的规范体系，是一个按部就班的过程。咱们还有至关多的内容须要集成。

规范方面：

一、针对咱们的埋点业务，可以方便前端进行一键式添加埋点的功能。

二、针对监控方面，咱们须要统一化的前端监控方案，定义成规范，直接在插件中集成。

三、工具库的建设、工具库的接入等等。

模板方面：

一、已有模板能力的完善。

二、模板类型的扩充（node、小程序等）

三、模板的JSON化能力

工具方面：

一、工具读取json，生成模板的能力。

二、插件能力的支持。

三、插件的扩充。