Ethers.js 入门

Flying
2022-07-08 / 0 评论 / 150 阅读 / 正在检测是否收录...

Ethers.js 是构建不可阻挡的 Web 3.0 应用程序的发展最快的库之一。它已成为许多经验丰富的开发者的首选库,用于构建基于 JavaScript 的区块链应用程序,因为它既优雅又易于使用。你可以迅速掌握它。在本文中,我将为你介绍 Ethers.js,以及如何入门,以及你所需要的完整指南。本文将涵盖 Ethers.js 的先决条件以及你需要遵循的正确步骤,这样你就可以快速入门,开始在短时间内构建自己的区块链应用程序。

Ethers.js 是什么

erthers.svg

Ethers.js 是最受欢迎的基于 JavaScript 的工具包之一,它允许我们与不同的区块链进行交互,并且具有所有包装器,帮助进行 API 调用并在以太坊、Polygon、Avalanche 和任何兼容 EVM(以太坊虚拟机)的链上执行各种操作。

Ethers.js 是一个 JavaScript 库,它使你能够与基于以太坊的虚拟机(即 EVM)一起工作。基本上,我们都是通过浏览器(如 Chrome、Brave、Safari 等)使用 Web 应用程序,当你在浏览时,浏览器直接与网站通信。

Ethers.js 的工作原理

如果你想创建一个网站,以便与区块链的节点通信,以便与智能合约进行交互,从区块链获取信息并编写新的交易,你需要连接到一个节点。

nodes.webp
节点

与区块链节点建立连接可以通过多种方式实现,比如直接通过网页浏览器、或者在你的计算机上使用脚本,或者通过后端服务器。所有这些方法都可以连接到区块链上的个别节点,以便开始使用它,从而获取有关加密货币和 NFT(非同质化代币)的信息,并编写新的交易。它可以帮助你创建驱动全栈去中心化应用程序的网站。

你需要一些东西将你的客户端连接到区块链上的其中一个节点,以便他们可以开始使用区块链的全部功能,这正是 Ethers.js 所做的。它是一个用 JavaScript 编写的库,让你可以创建与区块链通信的任何 JavaScript 应用程序,这样你就可以使用并创建基于去中心化应用程序(DApps)的许多应用程序。它实际上是一个桥梁,将你的客户端连接到区块链。

Ethers.js 模块

Ethers.js 由一些重要的模块组成,这些模块可以轻松地与区块链节点进行交互,并根据需要获取交易数据。为了开始使用 Ethers.js 的模块,让我们概览一下所有 Ethers.js 模块。

  • Ethers.Provider: 在这个模块中,它允许你初始化与以太坊区块链的连接,并为你提供发出查询和发送已签名交易的功能。通过这个模块,还可以管理区块链的状态。
  • Ethers.Contract: 在这个模块中,你可以部署和与智能合约进行交互,智能合约的部署和成功进行是 Ethers.Contract 模块的一部分。它还提供了一些独特的功能包,让开发者能够“监听”智能合约事件,并在监听到合约后,你还可以获取有关它们的信息。
  • Ethers.Utils: 这个模块让你处理用户输入的数据并根据你的需求格式化它们。Ethers.utils 让构建去中心化应用程序变得更容易。
  • Ethers.Wallet: 正如其名,它提供了一种将任何现有的以太坊地址连接到合适的钱包的方式。它还具有重要的功能,比如它允许你创建新钱包,并且也可以签署交易。

Ethers.js 的应用场景?

Ethers.js 库提供了许多工具集,正如我们在上文中所看到的,用于与以太坊节点以及 JavaScript 或 TypeScript 进行交互。它最初是为其他领域设计的,但后来演变成了一个更通用的库。

由于 Ethers.js,我们现在能够轻松连接到区块链,并获取所有所需的信息,比如交易详细信息、区块更新等。

使用 Ethers.js 作为与区块链节点通信的唯一可靠通信的区块链产品之一是 uniswap.org

连接 RPC 客户端

JSON-RPC API 另一种与以太坊交互的比较流行的方式,用在所有主要的以太坊节点 (如 Geth 和 Parity) 以及许多第三方 web 服务 (如 INFURA)。 它通常提供了:

  • 连接以太坊网络 (Provider)
  • 保存你的私钥并且可以签名 (Signer)

使用 Ethers.js 连接 RPC 客户端相当容易。你可以按照以下步骤开始使用 Ethers.js

搭建环境

  • Node.js
    在安装 Ethers.js 之前,你需要在你的计算机上安装 Node.js,请点击此链接安装 Node.js。
  • Ganache
    Ganache 快速启动个人以太坊区块链,你可以使用它运行测试、执行命令和检查状态,同时控制链如何运行,是 Truffle 工具套装的一部分。请点击此链接安装 Ganache,启动后打开或新建一个工作空间。

ganache.svg
Ganache

新建工程

首先,为你的项目创建一个新的项目目录,并导航到它:

$ mkdir tutorial
$ cd tutorial

接下来,使用 npm 初始化一个新的 Node.js 项目:

$ npm init -y

安装依赖

这将在 tutorial 目录中创建一个 package.json

在设置好 Node.js 我们来安装 ethers.js。

npm install --save ethers

ethers.js 当前版本为 5.6.9

新建脚本

将下面的脚本保存到一个文件中,例如 index.js

// 这将在你的项目中导入 Ethers.js
const { ethers } = require('ethers')

const url = 'http://localhost:7545'
const provider = new ethers.JsonRpcProvider(url)

async function main() {
  const blockNumber = await provider.getBlockNumber()
  // 获取
  console.log('Current block number: ' + blockNumber)

  const accounts = await provider.listAccounts()
  const balance = await provider.getBalance(accounts[0])
  console.log('Current block number: ' + ethers.utils.formatEther(balance))
}
main()

getBlockNumber 将返回最新区块编号,getBalance 会获取给定地址的帐户余额。

运行测试

在终端窗口中,运行 node index.js 脚本,控制台显示如下信息:

$ node index.js
Current block number: 0
Current block number: 100.0

连接 MetaMask

开发任何基于以太坊的产品的最快最简单的方法是使用 Metamask。下述示例将访问 MetaMask 的最新区块号和账户余额。

Ganache 本质上是个本地太坊区块链模拟器,相比之下 MetaMask 的数据更接近真实。

安装 MetaMask

metamask.svg
MetaMask

Metamask 是一个加密货币钱包,可以让用户存储以太坊和其他 ERC-20 代币。它是一个浏览器插件,可以帮助你存储或转移以太坊或任何其他 ERC-20 代币。它是一个提供以下功能的浏览器扩展:

  • 连接到以太坊网络
  • 保留你的私钥并可以将其用作签名者。
  • 与测试网络上的虚拟硬币等水龙头进行交互。

安装 MetaMask 后请为其设置账户,并通过水龙头充值。推荐我常用的水龙头:

新建页面

新建一个 HTML 文件,添加如下代码:

  • html 代码
<body>
  <p id="blockNumber"></p>
  <p id="balance"></p>
  <script type="module">
    // ...
  </script>
</body>
CDN 加载的 web3.js 目前支持 ems 模块,可以在浏览器中通过 ES6 的方式访问。
  • javaScript 代码
import { ethers } from "https://unpkg.com/ethers@5.6.9/dist/ethers.esm.min.js";
async function main() {
  const el = document.getElementById('balance');
  // Check if MetaMask is installed
  if (window.ethereum == null) {
    el.innerText = 'MetaMask is not installed';
  } else {
    // A Web3Provider wraps a standard Web3 provider, which is
    // what MetaMask injects as window.ethereum into each page
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const blockNumber = await provider.getBlockNumber();
    document.getElementById('blockNumber').innerText = 'Current block number: ' + blockNumber;
    try {
      await window.ethereum.enable();
    } catch (error) {
      el.innerHTML = 'User denied account access';
    }
    const accounts = await provider.listAccounts();
    const balance = await provider.getBalance(accounts[0])
    el.innerText = 'The first account balance: ' + ethers.utils.formatEther(balance);
  }
}
main();
本例中使用 provider.listAccounts(), 它返回一个 promise 从中可以获取到由助记词生成的所有账号。

运行测试

在 Chrome 中运行,浏览器显示如下信息:

Current block number: 9856316

The first account balance: 1.361959997126591
出于安全,通常较好的方式是使用 npm 将这个库复制到你的 web 服务器中来进行各种操作。但若想快速构建实例展示,可以将我们的 CDN 加载到你的 web 应用程序中。
1

评论 (0)

取消