实现DoKit Web端请求捕获工具(二)读Eruda源码上

·  阅读 660
实现DoKit Web端请求捕获工具(二)读Eruda源码上

一、前言

实现DoKit Web端请求捕获工具(一)产品调研中,我调研了常用的两个Web移动端调试工具Eruda和VConsole,在实现自己的Web端请求捕获工具前,我阅读了Eruda部分的源码。

阅读源码的目的:一是作为前端初学者,了解该Node.js项目的实现框架,二是具体研究它网络请求捕获部分的实现思路。

本节主要解析了Eruda项目的总体结构及在本地运行它的步骤。

二、项目结构概述

clone下Eruda的源码(源码地址),可以看到其项目目录结构如下:

如Eruda的贡献者指引文档.github/CONTRIBUTING.md中所述:

由上可知两点信息:一是运行Eruda项目前所需的准备,二是通过上述描述和查阅资料,了解到Eruda项目的总体组成结构。

三、运行Eruda项目前所需的准备

  1. 在clone了仓库后,需要运行以下命令,来安装项目运行所需的测试环境和依赖。
sudo npm install -g codecov
sudo npm install -g @liriliri/lsla    //实际运行时发现需先安装这两个,且需加sudo权限,否则后面会报错
npm install
npm run setup

2. 然后就可以用npm run dev来加载运行Eruda项目了

运行效果如图:

四、项目总体组成结构

  • doc中是Eruda的使用文档和工具文档;
  • build中是webpack的配置文件及其他脚本文件;
  • test中是单元测试工具jasmine+karma相关的用于测试的文件。
  • .eslintrc.js、.eustia.js、prettier.config.js和karma.conf.js,说明Eruda项目使用了ESLint(插件化的JavaScript代码检测工具)、Eustia(一个JavaScript工具库)、Prettier(前端代码格式化工具)和Karma(JavaScript测试执行过程管理工具),项目中使用Karma让Jasmine测试自动化完成;
  • .travis.yml是持续集成服务Travis CI的配置文件,它绑定Github上面的项目,只要有新的代码,就会自动抓取。而后提供一个运行环境,执行测试,完成构建,还能部署到服务器;
  • .gitignore/.erlintignore/.prettierignore中分别是相应工具工作时需要忽略的指定文件路径;
  • 3个git相关文件是项目与git仓库交互时的相关配置;
  • node_modules是npm安装后生成的,用来存放安装的包;
  • 而src中是项目的源代码,Eruda源程序是一个基于ES6新规范的Node.js项目。
  • package.json位于模块的目录下,用于定义包的属性。

注:ES6全称ECMAScript 6.0,是JavaScript的下一个版本标准,由于是2015.6月发版的,又称为ES2015。ES6主要是为了解决ES5的先天不足,比如JavaScript里并没有类的概念;目前浏览器的JavaScript是ES5版本,大多数高版本的浏览器也支持ES6,不过只实现了ES6的部分特性和功能。

五、本节结论

根据本节内容可知,关于请求捕获功能实现方案,我们需要关注package.json和src中源程序的内容。

六、文章索引

实现DoKit Web端请求捕获工具(一)产品调研

实现DoKit Web端请求捕获工具(二)读Eruda源码上

实现DoKit Web端请求捕获工具(三)读Eruda源码下

分类:
开发工具
标签:
分类:
开发工具
标签:
收藏成功!
已添加到「」, 点击更改