前端建设

2019-04-07

开篇闲扯

来公司也有半年了,想想这半年也做了不少事情,刚好今天可以来说说目前对公司前端建设做的一些事情,刚好也能进行一下总结。

前期的思考

刚来的时候,其实只是制定了对公司前端的技术选型,其实技术选型是远远不够的,技术选型其实只是一部分,更重要的其实还是在整个开发流程的制定与统一,这样才能保证后续开发人员的一致性。因此在做了技术选型后,我也同时制定了目录结构、命名规范、代码规范、代码提交规范。考虑到后续会有越来越多新的系统需要开发,刚好又是偏向于后台系统的,因此完成可以由一套完整的模板进行产出。

演变过程

一开始

对于刚刚完成第一版demo的时候,其实包含的功能很简单,就是能够用webpack进行构建,包含react react-router redux antd 这些基础模块,同时制定了目录结构。
image
这套目录结构目前也一直沿用至今。
这个模板其实不止是定义了目录的规范,也包含了基本的框架定义,比如:登录、登出、用户基本信息、侧边栏菜单、头部、路由权限控制、路由生成菜单、http请求的统一存放及配置、404页、浏览器不兼容提示页,所以下载这份模板后打开页面如下:
脚手架主页
之后开发的话,开发人员只需要开发中间的内容模块即可。

引入代码规范和代码提交规范

代码规范使用的是 standard js,这个包含了完整的规范说明npm插件以及vs code 插件,可以说是开箱即用了,其实我觉得官网上提的一个观点是我蛮赞同的,大致就是不建议去修改制定的规范,因为本身也只是为了制定规范而进行使用,如果去修改,那么可能违背了原本的初心,可以修改一些编码的习惯,但是最终的目的还是为了能够让一套规范进行执行。
代码提交规范的话使用的是commitlint,同样的,经过一些简单的配置,就能够实现对某个项目代码提交的限制,如果编写的message不符合提交规范的话,则会禁止代码提交到本地仓库,我们使用的是angular团队的提交规范config-angular
将这两个规范加入到前面的模板中,就能保证下次使用模板的人,不需要经过任何的配置就能够遵循这两套规范。

cli

如果每次都去 git clone 其实是一件不优雅的操作,如果模板变多了那也不是办法,因此需要引进cli,编写了一个cli来创建模板,其实思路还是蛮简单的,创建文件夹->git clone模板->安装依赖->完成。随后就是顺着这个思路进行编写cli,然后提交到npm上,之后只需要执行create-tpl <floder_name>就可以创建我们的通用模板了。

剥离构建工具

后来发现,构建工具其实应该是独立于模板的,因此对构建工具进行了剥离,也同样开发了一个cli,这样做的好处是可以单独对构建工具进行升级,以及对开发人员来说这层是透明的,其实他们也不需要进行关心,不过担心后续可能会有预研或者扩展的需求,还是留了一个钩子用来增加其他的配置信息用,但是目前还没进行开放,随后构建的命令则变成了"dev": "webpack-script start:development"

私有npm

当然为了能够让cli工具以及构建工具属于我们自己内部的,我们也借用nexus搭建了自己的私有npm源,同时其他语言的私有源也同时是使用nexus,到最后我们就将cli工具以及构建工具全部转移到了私有npm上。

数据可视化开发脚手架

其实上面提到的都是目前我们使用的基础模板,近期也同样新增了大数据可视化开发脚手架,其实在目录上也大致相同,因为使用的技术栈是一致的,在业务分层上有些许不同,多了一个group文件夹,用来表示分组,其它都是一致的。因为数据可视化开发脚手架这套需要创建自己的UI组件,为了能够便于查阅,引入了docz,这个其实有点像 antd 他们官方首页那样的一种生成方式,但是觉得又较为方便使用,使用mdx的写法,可以在md中编写jsx,又是开箱即用,对于简单的需求,以及前期的使用来说还是很方便的,生成后的页面如下:
docz

结语

目前我们前端简单的一个架构大致是这样的:
前端架构

一切的入口都是以 create-tpl 为开始,目标就是能够有一个好的业务分层,好的开发统一,好的前端开发流程。其实后面还有很多需要做的事情:

  • 前端模板升级脚本
  • 构建脚手架自定义扩展
  • 构建速度提升
  • 前端CI

最后附上一份我用于给新入职人员的一份前端开发指南


技术选型

react

目前主流的前端框架之一,组件式开发。

参考资料:https://reactjs.org/docs/getting-started.html

react-router v4

前端路由。

参考资料:https://reacttraining.com/react-router/web/example/basic

redux

前端状态管理。

参考资料:https://cn.redux.js.org/

antd

前端 UI 组件。

参考资料:https://ant.design/docs/react/introduce-cn

axios

http 请求工具。

参考资料:https://github.com/axios/axios

准备工作

可以通过内部的ftp进行下载
ftp地址:ftp://192.168.1.23/2_%E5%B7%A5%E5%85%B7/2_Dev

nodejs 安装 - 8.9.x 以上版本

建议下载官方稳定版本

下载地址:https://nodejs.org/zh-cn/

IDE - VS code

微软出品的IDE,轻量、插件丰富

下载地址:https://code.visualstudio.com/

版本管理工具 - git

分布式的版本管理工具。

下载地址:https://git-scm.com/

GUI 版本管理工具 - sourcetree

git 的 GUI 版工具,易于查看族谱和版本回溯。

下载地址:https://www.sourcetreeapp.com/

目录说明

1
2
3
4
5
6
7
8
9
10
11
12
├── README.md # 说明文档
├── config # 环境配置文件
└── src # 工程目录
├── App.jsx # react 入口文件
├── api # 请求函数
├── assets # 静态资源
├── components # 公用组件
├── lib # 工具类函数
├── index.js # 主文件
├── route # 路由
├── redux # redux
└── view # 页面

规范说明

代码规范

参照团队 JS 代码规范:ftp://192.168.1.23/1_%E6%96%87%E6%A1%A3/%E8%A7%84%E8%8C%83/%E6%8A%80%E6%9C%AF%E9%83%A8_JS%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83.docx

git 规范

参照团队 git 规范:ftp://192.168.1.23/1_%E6%96%87%E6%A1%A3/%E8%A7%84%E8%8C%83/%E6%8A%80%E6%9C%AF%E9%83%A8_git%E5%8D%8F%E5%90%8C%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97.zip

目录规范

src/components

用于存放公共组件,可复用组件。

src/api

根据业务的具体流程,对请求进行拆分文件。
假如业务中存在很多的请求,那么可以根据具体业务类型进行拆分,例如专门针对学生的 CRUD,可以新建一个 student.js 用来存放于学生相关的请求。

src/lib

用于存放通用的工具类函数。

src/route

用于存放路由相关的文件,建议根据页面级进行拆分路由

src/view

用于存放页面,根据页面进行划分文件夹。

  • 文件夹名称统一使用小写。
  • 文件使用大写开头。
  • 可以在页面中创建 components 用于存放页面级的公用组件

config

环境配置文件。
development - 开发环境、test - 测试环境、preproduction - 预生产环境、product - 开发环境

开发流程

脚手架提供基础能力和 UI 布局,开发人员只要专注于业务开发就好。

环境安装

参考 准备工作,安装必要的环境

通过脚本安装

安装

1
2
npm config set registry=http://192.168.1.111:8081/repository/npm-group/ # 建议将源设置为公司的源,或者可以使用 nrm 管理 npm 源
npm install @cecdataFE/create-tpl -g --registry=http://192.168.1.111:8081/repository/npm-group/

使用

1
create-tpl <project_name> --type=react # react: react通用模板;dataVision: 数据可视化大屏开发模板

运行项目

1
2
cd <project_name>
npm run dev # 运行开发环境

运行起来后,通过浏览器访问:http://localhost:8080

之后就参照 目录规范 进行开发

代码提交

可以使用 sourcetree 等 GUI 工具,可以通过 git 命令行进行提交,如果是通过 git 命令行进行提交的话脚手架中已经内置了 commit-msg 检查工具。如果是通过 GUI 工具提交的话,建议设置提交模板 docs(scope): <描述>

下面是我的微信

欢迎骚扰

ww1o01