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

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

在本篇中，你可以了解到：

• 安装过程可能面临的问题
• 如何与 Web3Modal 搭配使用
• human readable abi 和只读合约方法调用
• 读写合约调用以及 gas 相关问题
• 如何确定交易的状态
• 如何调用使用了 struct 的合约方法
• 常见的 UNPREDICTABLE_GAS_LIMIT 错误如何解决

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

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

那么，让我们进入正题吧！

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

npm install --save ethers

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

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ethers.umd.min.js"
  type="application/javascript"
></script>

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

const ethers = window.ethers;

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

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

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

所谓连接，可以从两个维度来说明：

• 发生地点：前端 or 后端
• 连接目的：只读调用 or 发起交易

在 Ethers.js 中，与之相关的类有三个：

• provider，面向只读操作
• signer，发起交易时必需
• wallet，signer 的子类

在前端连接

一般来讲，从前端连接，有以下的特点：

• 通常会对接用户已安装的钱包或钱包插件，如 MetaMask
• 一般都会涉及到读写操作

这里的步骤是：

• 先创建 Web3Provider 实例，它可以应付一般的只读操作。
• 如果需要发起交易或签名，则可以通过 provider.getSigner() 来得到 signer，通过它来完成剩下的操作。

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

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

• 它依赖 react ，若你采用的是非 react 框架，需要注意。
• 使用不同的 provider 前需安装，这意味着支持的 provider 越多，那么应用构建之后的包会越大。

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

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