DTeam 技术日志

Doer、Delivery、Dream

Ethers.js 非权威开发指南(上)

胡键 Posted at — Jun 14, 2021 阅读

我曾经不止一次在以前的文章中鼓励大家在开发 dapp 时使用 Ethers.js,但时至今日却还没有一篇专门的文章来介绍它,这多少有些说不过去。于是,我决定用两篇文章的篇幅来谈谈它的开发使用。

这两篇文章以当前最新的 v5 版本为基础,采用问题驱动形式,涵盖了 dapp 开发中面临的主要开发主题。

在本篇中,你可以了解到:

下篇则重点关注合约事件、历史、签名等相关内容。

作为开发者的你,假如在寻找让你能快速上手 Ethers.js 的使用,同时又能看到不那么小儿科的例子,那么本系列应该成为你的选择。

那么,让我们进入正题吧!

安装

通常,这里没什么好说的,按照文档上面的指示来就好了:

npm install --save ethers

但是,在极个别的情况下,尤其是采用某些前端框架时,按照以上方式安装可能会导致无法正确初始化 provider。此时,可以求助于另一种很容易被我们这些经过现代前端框架“洗脑”后的开发者所忽视的方法:最原始的 <script> 引入方式。

<script
  src="https://cdn.jsdelivr.net/npm/ethers@5.1.4/dist/ethers.umd.min.js"
  type="application/javascript"
></script>

然后,通过下面的代码引用 ethers 对象而非常见的 import

const ethers = window.ethers;

这种方式有一个副作用:在一些现代编辑器中,如 vscode ,无法利用其代码联想功能。因此,第一种方式应该成为你的首选,除非没得办法。

最后请注意:<script> 引入方式仅限于前端。对于后端代码(假如仍然使用 js / ts 的话),采用 npm i 方式即可。

连接钱包

严格来讲,本节的标题采用另一种说法更合适:“连接以太坊”。但由于“连接钱包”通俗易懂,故采用之。

所谓连接,可以从两个维度来说明:

在 Ethers.js 中,与之相关的类有三个:

在前端连接

一般来讲,从前端连接,有以下的特点:

这里的步骤是:

由于本节的关注点是连接钱包,因此让我们先来看看第一步:获取 Web3Provider

对于前端应用,建议配合 Web3Modal 来使用,因为它对于常见的 provider 提供了统一的接口,并可和 Ethers.js 搭配使用。但是,使用时需注意:

然而,这两个问题可以用同样方式来解决:最原始的 <script> 引入方式。采用这种方式,不仅可以规避必须安装 react 的限制,同时也避免了需静态打包各个 provider ,将其延迟到应用加载页面时。因为我个人目前偏好 svelte ,这种做法已经在实际中得到了应用,效果良好。

下面示例采用 <script> 引入方式的做法,但很容易改造成通过 npm i 方式引入的代码:忽略第一步,采用 import 方式而非 window 引用对象。

本文是付费文章,剩余内容请访问以下链接支付之后继续阅读:

付费链接 (已付费:4)

友情链接


相关文章