泛谈ViteJS


  • Reward

    浅析ViteJS

    ViteJS定位:JS版本的工具包集合

    ViteJS主要提供:

    • 基础功能,如网络连接、abi解析、地址派生等;
    • 包装GoVite-API,如事件监听,获取交易列表,发送各类型交易等;
    • 便捷功能,如通过助记词生成账户实例,实现快速发送交易等;
    • 通过ViteJS可以快速构建钱包、开发DApp、连接全节点进行数据查询等等。

    这篇文章会浅谈一下ViteJS的开发选型以及应用,并提供简单的应用例子。

    开发环境

    • ViteJS基于TypeScript开发

    工具

    • 包管理:yarn
    • 构建:webpack
    • 测试:mocha
    • JS包版本控制和发布:lerna

    为什么使用TypeScript

    • JS是一门动态类型语言,表现十分灵活;

    但同样的,JS没有类型检查;提供对外接口代码补全、智能提示都不够友好;书写不规范会很容易诱导发生很多隐蔽的bug,而且影响代码的可读性。

    为改变这些问题,我们决定引入TypeScript。

    • TypeScript是JS的超集,对JS有很好的兼容性;
    • TypeScript提供类型推断、类型定义以及类型检查;
    • 代码开源、兼容第三方库、IDE插件齐全、社区也很活跃、上手难度低等等.......

    为什么使用lerna
    上文已经提到过,ViteJS是Vite的JS版本的工具包集合,明确这个定义之后,我们已知ViteJS将具备以下特点。

    • ViteJS 将提供多个工具包;
    • 工具包间的依赖会很小或者很明确;
    • 开发DApp或者其他功能,为减少打包后大小,使用者将会倾向于自定义使用某几个工具包的组合,而不是全局引入一个ViteJS包。

    这些特点决定了,我们需要一个可以帮助我们管理工具包间依赖、版本、发布的工具。lerna可以很好的实现这一点。

    • lerna可以让我们在一个git仓库中管理多个发布包;
    • lerna可以帮助我们处理好包间依赖,以及安装各个包的依赖;
    • lerna让发布流程变得更加清晰、简单:自动打tag、可以生成changLog、更新包版本等等.....

    目录结构

    插图1.png

    ViteJS的目录结构十分简单,开发只需关注3个文件夹:build(构建)、src(源码)、test(测试)。

    源码结构

    e608fee9-12ca-4336-a9f3-7d864e51efd3-image.png

    由ViteJS是一个工具包集合 以及 选择的包管理工具lerna,已经决定了ViteJS将是一个脉络清晰的平铺化管理结构,每一个功能集将形成一个单独的文件夹,进而发展为一个单独的包。

    这种管理结构为我们带来了很大的优势:

    • 代码逻辑、目录结构十分清晰,可读性很强;
    • 模块间依赖、包管理结构十分明朗,无论使用者还是开发者调用都更加简洁;
    • 功能明确,强势的避免了修改某个功能点,造成额外bug这样的尴尬情况。

    测试

    76fc2ed5-b811-47b2-8566-f6ed5a842229-image.png

    良好的代码结构提供了更清晰的测试流程。

    测试目录基本基于src目录进行创建,每个功能集都拥有自己的测试文件夹。

    通过git hook,每次commit之前都会执行用例,测试用例不全部通过则不能提交代码。

    而git仓库首页则会显示build结果和测试覆盖率。

    通过ViteJS创建自己的钱包
    Demo:https://github.com/lovelycs/ViteJS-demo

    开发环境
    node: v11.4.0
    yarn: v1.15.2

    初始化项目

    • 新建文件夹ViteJS-demo

    • ViteJS-demo文件夹下执行指令yarn init,按步骤初始化项目

    • yarn add @vite/vitejs

    • yarn add @vite/vitejs-http ,ViteJS-demo 默认使用http协议

    • ViteJS-demo文件夹下,新建 index.js 和 config.json

    初始化完成,你的项目看起来像是这样

    11acc7c9-76fb-49cf-a70d-c0b90c2236b3-image.png

    连接节点
    务必将 config.json 添加到. gitignore 文件中,因为接下来我们将从 config.json 当中读取你的全部配置。
    务必记录自己的助记词,并注意隐藏,切勿使用未知助记词,谨慎向未知地址转账。

    • 选择自己的测试节点,并配置到 config.json 当中的 http 选项
    • 将自己的助记词配置到 config.json 当中的 mnemonic 选项

    2f1a109d-5ae1-4fb9-8f32-18aad66990f6-image.png

    开始连接节点

    • index.js 中建立HTTP服务
    • 新建 client 用于快速调用 GoVite-RPC-API

    6a8c6020-9fea-416d-b71a-b540910d0b58-image.png

    • node index.js 输出如下结果,则代表通信连接建立成功

    43f40957-6926-4f57-afac-dee65dd953a5-image.png

    创建自己的账户

    • 传入助记词 和 client,即可以创建出自己的助记词实例与节点进行通信
    • node index.js 成功输出助记词,则代表实例创建成功

    cb82480c-4d6d-4ec6-ac68-934fe93a23a6-image.png

    • 通过 myMnemonicAccount.getAccount({ index: 0 }) ,获取助记词下的0号地址实例

    1510a516-c2c7-4140-8bb4-0694a162f076-image.png

    • getBalance接口可以获取到账户余额以及在途金额

    开始发送交易

    1. 为自己抵押一些配额,并通过getPledgeQuota接口,查看配额是否生效
      8c033ad2-b75f-4b76-baf2-9600d15b8a29-image.png

    2. 如果有未接收交易,则可以通过account.autoReceiveTx();开启自动接收交易

    3. 发送交易,拿自己的地址进行测试
      8d25e059-0717-42f9-b957-4191599b75af-image.png

    到此为止,已完成钱包基本功能。

    查阅更多功能
    查看demo代码 https://github.com/lovelycs/ViteJS-demo

    相关概念引导
    【ViteJS git仓库】https://github.com/vitelabs/vite.js
    【ViteJS 文档】https://vite.wiki/api/vitejs/
    【ViteJS 应用demo】https://github.com/lovelycs/ViteJS-demo
    【Vite 教程】https://vite.wiki/tutorial/start/
    【DApp 开发指南】https://vite.wiki/zh/tutorial/contract/dapp.html


Log in to reply
 

Suggested Topics