前端代码获取文件大小_vue技术栈前端建设方案
前言
主要介绍云课堂前端在CRM系统的前端建设方面的经验总结,方便其他前端人做技术选型,全栈工程师快速建站。本文适合对vue技术栈和前端工具化、工程化感兴趣的朋友。
整体架构
CRM系统的服务端是基于node的,前端是以vue技术栈为主的。前端部分整体架构图如下:
应用层
整体前端应用层基于vue技术栈的传统三大件:
- 路由层由vue-router统一管理。
- 基础组件库则是选择了基于vue的elementui。同类型的组件库还有bootstrap-vue、ant-design-vue等。
- 数据store管理则采用了vue官方推荐的vuex来全局维护store。其他数据管理方案可以采用mobx配合mobx-vue来局部管理多个store。
至于util库则是选择了传统的lodash。当然你也可以选择完全基于函数式编程范式的ramda和基于ts构建的remeda。
至于发送请求的库,我们选择了axios,其方便的拦截处理和插件拓展功能非常实用。也有其他备选方案如request和superagent。
工具层
在应用层的选型维度之外,我们也进行了一些工具化的建设。
在mock数据方面,虽然配合axios的axios-mock-adapter很好用,但是其限制了使用范围(必须和axios配合),并且需要进行额外的逻辑侵入。结合网易自研的nei的编辑优势和webpack-dev-server的方便配置,团队自研了http-mocker,提高mock的体验和效率。通过可视化界面编辑数据,并灵活切换远程本地代理,达到mock的效果。
在工程构建方面,选择了业界主流的webpack作为打包工具。这里需要注意的是,为了优化加载文件大小,需要好好利用其code splitting功能。
在工程组件模板方面,团队自研了yoso,动态切换github和gitlab模板库,方便程序员同时为社区和企业做贡献。
在一些其他的格式化管理方面,充分利用了git钩子,基于husky做了一系列优化,后面会具体谈到。
测试
针对应用的质量,我们进行了组件和util维度的单元测试、数据状态管理的单元测试和部分重要逻辑的UI自动化测试。
针对组件和util的单元测试,我们基于由Facebook出品的jest,传统的mocha和chai还有覆盖率工具istanbul需要自己去单独引用,配置较为繁琐。而jest则全套集成,方便快捷。
针对重要的基础组件,基于jest-serializer-vue配合jest的快照测试功能,来确保模板的输出结果一致性。
针对Vuex的数据状态管理的测试,个人认为其重要性仅次于util,这里推荐一个自己参与开发的工具vue-test-actions,可以简化很多重复的逻辑。
针对UI自动化的测试,基于无头浏览器puppeteer,以及jest对应的插件jest-puppeteer。这里也可以选择cypress,虽然可视化的体验更好,但是也更加重型。而个人觉得既然单元测试选择了jest,通过jest-puppeteer来配合puppeteer也可以达到需求。
可维护、美化
我们在git钩子中通过husky配合lint-staged可以做很多有意义的事情,这里列举几个实例。
代码美化
在commit阶段,通过prettier,对代码进行指定格式的修改和美化,配置方式如下:
"lint-staged": {"src/*.js": ["prettier --write","git add"]},"husky": {"hooks": {"pre-commit": "lint-staged"}},
校验commit信息
校验commit信息是否符合规范,这里我们采用了AngularJS Git Commit Message Conventions,严格语义的提交信息,可以在工具化时做很多事情,比如说配合conventional-changelog通过获取git元数据自动生成changelog等。
配置如下:
"husky": {"hooks": {"commit-msg": "node build/verifyCommitMsg.js"}}
verifyCommitMsg.js文件内容如下:
const color = require('chalk');
const msgPath = process.env.HUSKY_GIT_PARAMS
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()const commitRE = /^(vd+.d+.d+(-(alpha|beta|rc.d+))?$)|((revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|ci|chore|types|build)((.+))?: .{1,50})/if (!commitRE.test(msg)) {console.log()console.error(` ${color.bgRed(' ERROR ')} ${color.red(`invalid commit message format.`)}nn` +color.red(` Proper commit message format is required for automated changelog generation. Examples:nn`) +` ${color.green(`feat(compiler): add 'comments' option`)}n` +` ${color.green(`fix(v-model): handle events on blur (close #28)`)}nn` +color.red(` See build/COMMIT_CONVENTION.md for more details.n`) +color.red(` You can also use ${color.cyan(`npm run commit`)} to interactively generate a commit message.n`))process.exit(1)
}
自动化部署
一般自动化部署是在其他CD机器上去做的,如果没有这个条件,甚至可以在git钩子阶段完成。但是需要注意的一点是,git钩子是没有push阶段的,所以需要通过延时,并且需要一些工具如git-branch-is,来判断当前push的分支。
这里配置如下:
"husky": {"hooks": {"pre-push": "if git-branch-is -q test; then node build/deploy.js; fi"}}
由于这里的部署脚本调用了网易内部NDP平台的API和秘钥,就不具体展示了。
工程化
前面提到了web应用、工具、测试、美化校验等相关点,这里说明下在工程化角度做的一些事情和经验。
首先,在CI方面,由于我们在commit阶段只是做了简单了代码美化,所以eslint和测试的执行过程都交给了Gitlab的runner。
在异常监控方面,我们选择了sentry,并使用了其私有化部署工具onpremise。
在多工程维护管理方面,个人认为组件或者模块适合用mono-repo的风格管理,使用lerna这样的工具。而工程规模的才是采用multi-repo风格来管理比较合适。为了提高多个工程分支等操作时的便捷性,团队自研了multi-repo-git,来提高分支操作的效率。从此再也不用同时开好几个控制台面板了。
总结
以上就是本次分享的全部经验了,如果各位对其中某些选择觉得不妥,或者对某些自研工具有同场景下更好的开源解决方案,欢迎交流。
原文链接,讨论地址
前端代码获取文件大小_vue技术栈前端建设方案相关推荐
- 前端体系认识和我的技术栈——wsdchong
前端体系认识和我的技术栈 文章目录 前端体系认识和我的技术栈 前言 往期的学习记录 第一阶段:认识(前端路线) 第二阶段:理解(从产品角度看前端) 第三阶段:实践(vue框架) 前端体系认识 别人的前 ...
- 哈啰 Quark Design 正式开源,新一代跨技术栈前端组件库
点击"开发者技术前线",选择"星标" 让一部分开发者看到未来 1 Quark Design是什么? Quark(夸克)Design 是由哈啰平台 UED 和增长 ...
- 重磅!哈啰 Quark Design 正式开源,下一代跨技术栈前端组件库
前端Q 我是winty,专注分享前端知识和各类前端资源,乐于分享各种有趣的事,关注我,一起做个有趣的人- 公众号 点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 大家好,我是winty! ...
- 什么是前端?前端入门需要学习哪些技术?前端找工作需要具备什么样的条件?
一.web前端是什么 简单的来说就是,我们使用的APP.网站.小程序中所有可以直接看到的东西.比如:淘宝首页,中间部分的天猫新品.充值中心.右下角 我的淘宝,这些按钮都属于前端.那点一下按钮,跳到另一 ...
- 前端代码规范参考和如何保持前端代码规范
1.前端代码规范参考 编写前端代码规范的主要驱动力是两方面: 1) 代码一致性(一个项目的代码看起来就像一个人写的一样) 2) 最佳实践. 通过保持代码风格和传统的一致性,我们可以减少遗留系统维护 ...
- 怎样在线把别人web前端代码抓下_自学web前端8个月,我是怎样拿下7K薪资的?
自学web前端8个月,我是怎样拿下7K薪资的?自学两个字,说起来很轻松,但真正做起来那真是绝非易事,说实话,在我收到HR发来的offer那一刻,眼泪差点掉下来,这个过程中吃的这些苦,真的只有自己才能知 ...
- 技术合伙人必备攻略---app开发技术栈调研--多种方案对比--uniapp学习路线
app开发技术方案对比 app开发主要有几种技术方案如下: 原生开发 原生开发简介 原生(native)开发从定义上来说 一般是指用原生开发语言开发,原生开发语言就是开发整个系统时使用的编程语言. 对 ...
- python 审批流_Odoo 基于企业微信实现的通用审批流功能的自助配置及使用说明 - Oejia 技术栈,企业方案分享、Odoo顾问...
### 概述 以下为基于企业微信自建应用审批流程引擎实现的Odoo通用审批功能,基于企业微信官方审批应用实现的Odoo通用审批功能请移步到 http://oejia.net/blog/2020/05/ ...
- 【大前端】独家下载!看阿里巴巴前端技术专家解读2021前端热门技术趋势
2021 前端工程师应该关注哪些技术?阿里巴巴前端委员会重磅推荐! 复制该链接到浏览器完成下载或分享:https://developer.aliyun.com/topic/download?id=11 ...
最新文章
- 专家访谈:为什么我们需要Erlang
- Objective-C Runtime
- 莫名其妙的SqlServer更新错误:OleDbException 必须声明标量变量
- activemq启动wrapper stopped
- Survivor区详解
- hadoop学习4 调测错误备案
- 您从未听说过的Java 8的10个功能
- 机器人影视对接_机器学习对接会
- 《Caffe Modle Zoo》
- 胆的功能--中医谈胆的作用
- P0.9COB小间距LED显示技术的优势。
- 微信小程序跳过第三方的_微信小程序怎么解除第三方授权?
- inet_addr,inet_pton,inet_aton 用法
- 勇者斗恶龙服务器没有响应,PC版勇者斗恶龙英雄打不开怎么办?
- oracle中怎样判断数据是否为空,为空赋值,不为空也赋值
- WebException: The remote server returned an error: (416) Requested Range Not Satisfiable.
- Linux系统Redis安装教程-附带后台启动
- 【单调栈】【概念讲解模板代码】
- 桌面计算机网络图标不见了怎么办,桌面图标不见了怎么办?这里有妙招
- 基于DEAP的脑电情绪识别论文源码改进版本(附论文代码,lstm和rnn)
热门文章
- 全国计算机二级ms2017,2017全国计算机二级MS-Office选择题题库大全
- 生成有时间限制的二维码_二维码竟有被用完的一天!看到截止日期后,网友:虚惊一场...
- bl小说里面有个机器人管家_5G无人扫地机器人+进口吸扫一体机 杭州环卫工装备升级了...
- Vue Cli 3.x项目如何部署到IIS子站点下
- 开源IP代理池续——整体重构
- 回顾Spirng ioc 控制反转
- DIV实现CSS 的placeholder效果
- 【转】 C++中的new VS C语言中的malloc
- BestCoder Round #66 (div.2) 1002
- ThinkPHP 3.2版本 , 无法读取$_SESSION['verify_code']