模板仓库

模板仓库是什么

从写代码的开始，程序员一直在做一些偷懒的动作，比如17年那会儿，刚刚接触小程序，我作为一线开发人员，得花费大量的时间在小程序的调研上面，从0到1的过程，往往是最难的。

而我们的team leader告诉我，一个新的东西，从0到1非常难，从1到10就不应该那么难，应该把优秀的实践沉淀下来，下次开发就没有那么费劲了。

最开始，我对这个小程序做了很多的集成工作，公用的东西尽可能的提取出来，下次别人开发的时候，直接把我这个东西拿过去用就行了。

后来，慢慢的，直接集成了一个仓库模板，让别人去用。（这个模板就是我们的模板仓库）

根据我的个人经历，说一个题外话，其实国内大多数的前端团队比较low，很多公司基本上没有这方面的沉淀。

根据这个主题，我大致把这些公司分为三个层次：

1、任何项目，直接通过脚手架生成，然后直接在上面开发。或者直接在社区，拿一个案例，改改就成自己的项目，再进行二次开发。这是第一层次。

2、对于一个新的项目，进行充分调研，实践的过程中，不断集成，后续的二次开发，就能减少大量的时间。这是第二层次。

3、形成完备的仓库模板体系（pc端、mobile端、小程序端、甚至其他技术栈），提供完备的操作命令，在代码规范、模板、路由、样式、监控、埋点都有完整的实践。这是第三层次。

模板仓库怎么弄

根据个人的实践、我觉得应该从这么几个方面进行着手

1、规范

规范应该分为这么几个点：一个是对GIT规范的支持、还有就是对编码规范的支持、以及自己其他的一些设置。

GIT规范的支持，主要体现在githooks、以及commit message的格式校验，便于我们更好的管理git提交规范。

编码规范的支持，主要体现在eslint、stylelint两个方面，eslint主要是针对js、ts、vue、jsx等等进行校验，stylelint主要针对css、less等等进行校验。

同时，在githooks的precommit阶段，进行校验和修复。

这一部分：可以参考个人写的两篇文章：

1、GIT规范：juejin.cn/post/685705…

2、Lint规范支持：juejin.cn/post/685819…

2、基础库选择

基础库选择，就是要用比较知名的，大家都在使用的东西，进行我们的项目开发。

本质上，就是维护自己的package.json文件。

针对一个vue项目，个人会用这么几个库

axios、element-ui、lodash、moment、vue、vue-router、vuex、md5

3、基础代码集成

这里面分为这么几个部分：文件目录结构划分、pages/views、components、router、store、styles等等。

1、个人的vue模板仓库，目录大致是这样的

2、components

这一部分，名字叫组件，应该是觉得可以集成在项目中，大多数情况下，都用的着的一些东西。

3、views

这一部分，表示视图，应该提供一个类似demo的页面，帮助开发者快速进行页面生成，便于二次开发。

4、styles

这一部分，是公用的样式，一般会包括两个文件，一个是reset.css、一个是common.css。

reset.css是对样式的初始化。

common.css是对自己常用的一些布局进行梳理。

5、store

表示数据，是vuex的集成的地方。

4、命令提供

比如我们开发一个新的页面，这时候，免不了一些新建文件、引入组件等等重复性比较高的一些操作。

比如我们在pc端，最常用的业务，有这么三种情况：列表页、详情页、表单。

我们可以使用一个简单的命令，比如 npm run addPage，就能生成一个简单的页面。然后在这个基础上，直接进行二次开发。

5、其他集成

这一部分，比较偏向业务化，需要公司有足够的沉淀。体现在这么几个方面。

1、工具库集成。

这一部分，是一个专题，它的作用，是把公司常用的工具类集成起来。

比如：时间格式化、日期格式化、手机号校验、银行卡校验等等这些贴近团队内部的东西，集成进去。

具体的方式，可以通过发布npm包的方式，发布到npm上，然后接入模板仓库中。

2、业务组件库

如果我们经常使用element-ui，那么它对我们的效率的提升，是显而易见的。但是它的定位——基础组件库。

所谓的业务组件库，就是贴近业务，和我们公司内部的使用场景相关，在element-ui之上，二次封装，可以复用的东西，叫做业务组件库。

如果自己团队内部有这样的东西，可以接入到自己的模板仓库中！

3、监控和埋点

如果公司内部，有针对前端的监控和埋点插件，就直接接入。

但是如果没有的话（个人认为，绝大多数小公司是没有的），可以通过三方平台的方式接入。个人推荐阿里的——岳鹰监控

岳鹰：yueying-docs.effirst.com/start.html

埋点和监控，又是一个专题，后续会出系列文章，给大家分享。

个人实践

个人现在的想法，是提供几个基础的模板仓库，分为两端：pc、mobile。技术栈选择上会提供vue版本、以及react版本的仓库。

vue的pc版：github.com/mapbar-fron…

react的pc版：github.com/mapbar-fron…

不过这些仓库目前在更新中，本人会尽快的完善这些内容。

写在最后：本文是作者专题《前端团队技术打造》的一部分，查看更多内容请看下面的文章：juejin.cn/post/685705…