npm 包 @trufflesuite/web3-provider-engine 的使用教程

在区块链开发中,前端对于以太坊 DApp 的开发有很大的作用。而 @trufflesuite/web3-provider-engine 是一个优秀的npm包,是Web3 Provider模块的一个增强版本。本篇文章将为您详细介绍如何使用该npm包。

1. 什么是 @trufflesuite/web3-provider-engine

在以太坊的DApp开发中,Web3 Provider是非常重要的一个模块,用于将Web3接口与以太坊节点(如MetaMask、geth等)连接起来。而 @trufflesuite/web3-provider-engine 正是以Truffle Suite为主导开发的一个,它是Web3 Provider模块的一个增强版本。

相对于Web3 Provider的原生版本,@trufflesuite/web3-provider-engine 显著的优点如下:

  • 支持多个Provider的串联,可以自定义多个Provider、过滤器,最终形成一个有序的调用链;
  • 可以按需启动或关闭不同的Provider,提高调用效率;
  • 安全性更高,能够进行请求拦截、解密等操作。

2. 如何使用 @trufflesuite/web3-provider-engine

在使用 @trufflesuite/web3-provider-engine 之前,需要安装Truffle。同时,还需要安装以下依赖:

--- ------- ---------------
--- ------- --
--- ------- ----
--- ------- ----------------

例如,在React应用中,可以使用如下方式引入 @trufflesuite/web3-provider-engine :

------ -------------- ---- ------------------------------------

以下是使用 @trufflesuite/web3-provider-engine 来连接已部署到本地的Ganache的示例代码:

------ - ----------- - ---- ---------------
------ - ------- -- ---- - ---- ------
------ - --- - ---- -----
------ - ------------- -------------- - ---- ------------------------------------
------ ----------------- ---- ---------------------------------------------------------

----- ----------- - --- ----------------------------
----- -------- - --- -------------------------
----- ------ - --- ----------------

-- -----
---------------------- --------------------
----------------------------

--------------

----- ---- - --- ------------

----- ------- - ------------
----- ---------- - --------------------------------------------------------------------

-- ----
----- ----- - ----- -------------------------------------
----- ----- - -
  ------ ------------------------
  --------- --------------------------------------- ---------
  --------- ------------------------
  --- ---------------------------------------------
  ------ -------------------------------------- ----------
  ----- --
-

----- -- - --- ------------------
-------------------------------------------- ---- -------
----- ------------ - --------------

-- ----
----------------------------------- - -----------------------------
  ------------------------ -------- ------ -
    -----------------
  --

在本示例中,我们首先引入了 Web3 以及 @trufflesuite/web3-provider-engine 等依赖包。然后,创建了一个以 localhost:8545 为节点的 HttpProvider 对象。

在引入了 FilterSubprovider 后,我们使用 engine.addProvider() 方法来添加它。这样,我们创建的 Engine 就完成了。

最后,通过将 engine 传递给 Web3 初始化,我们就可以开始使用它了。在本例中,我们构造了一个交易并使用 engine 通过 Ethereum 网络发送它。

3. 结语

上述示例仅仅是 @trufflesuite/web3-provider-engine 的冰山一角。 @trufflesuite/web3-provider-engine 提供了许多可定制的选项,如各种过滤器和拦截器,可以根据自己的需求调整。希望本篇文章能够帮助到正在进行DApp开发的前端工程师们。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5f3e0f0adbf7be33b2567145


猜你喜欢

  • npm 包 @umijs/ast 使用教程

    在前端开发中,我们经常需要对代码进行分析、解析和修改。而 @umijs/ast 正是一个非常好用的 npm 包,可以帮助开发者轻松地对 JS、TS 和 Vue 代码进行 AST 解析,实现高效便捷的代...

    4 年前
  • npm 包 @umijs/error-code-map 使用教程

    前言 在开发过程中,我们经常需要处理多种可能出现的错误情况,这时候错误码就成了我们的好帮手。@umijs/error-code-map 是一个基于错误码管理的npm包,提供了一套完善的错误码映射表和相...

    4 年前
  • npm 包 @umijs/core 使用教程

    在前端开发中,使用框架和工具可以提高开发效率和代码可维护性。@umijs/core 是一款基于 React 和 TypeScript 的企业级前端应用框架,它可以帮助开发者更快速地搭建前端应用。

    4 年前
  • npm 包 co-defer 使用教程

    简介 co-defer 是基于 co.js 封装的一个 npm 包,它提供了一种在 Node.js 中实现异步函数按照定义的顺序执行的能力。co-defer 会在迭代所有给定的异步函数时,将每个异步函...

    4 年前
  • npm 包 postcss-plugin-px2rem 使用教程

    在前端开发中,不同设备的屏幕尺寸与像素密度差异很大,如何实现自适应的 UI 布局成为了一个必须面对的问题。rem 单位是一个很好的解决方案,而 postcss-plugin-px2rem 是一个让我们...

    4 年前
  • npm 包 algorithmjs 使用教程

    在前端编程中,算法是一个非常核心的概念和技能。不仅在许多面试过程中被广泛使用,而且在项目经验和编写高效的代码方面也显得至关重要。在这样的背景下,算法库成为了前端开发者不可或缺的一部分,而 algori...

    4 年前
  • npm 包 auto-correct 使用教程

    简介 在前端开发中,我们经常需要进行文本处理,例如进行单词纠错。auto-correct 是一个 npm 包,它可以自动纠正英语单词拼写错误,提高我们的文本处理效率。

    4 年前
  • npm 包 npm-request 使用教程

    前言 在前端开发中,经常需要与后端进行数据交互。而与后端交互最常用的方式之一是通过发送网络请求来获取数据。而 npm-request 就是一个非常常用的异步网络请求库,它可以让我们方便地发送 HTTP...

    4 年前
  • npm 包 cnpm 使用教程

    简介 npm 是 Node.js 的包管理工具,它提供了一个大量的开源的 JavaScript 模块,使得开发更加轻松和高效。但是,由于 npm 使用时需要从境外的服务器下载模块,对于国内用户来说,下...

    4 年前
  • npm 包 eslint-config-xadillax-style 使用教程

    随着前端技术的不断发展,代码的规范性也成为了前端开发中必要的一部分。 eslint 是目前较为流行的 JavaScript 代码规范工具。在很多公司中,为了代码的易读性和可维护性,都会将 eslin...

    4 年前
  • npm 包 shameimaru 使用教程

    在前端开发中,使用 npm 包已经成为一种常见的方式。其中,shameimaru 这个 npm 包是一个非常好用的工具,可以帮助我们在开发中快速生成占位图片。在本文中,我们将详细介绍如何使用 sham...

    4 年前
  • npm 包 bigbrother-webpack-plugin 使用教程

    在前端开发中,我们经常需要通过 webpack 对项目进行打包、优化和管理,其中插件(plugin)是一个非常重要的部分。今天,我要向大家介绍的是一款非常实用的 webpack 插件——bigbrot...

    4 年前
  • npm 包 build-statistics-webpack-plugin 使用教程

    前言 在前端开发中,我们经常需要使用 webpack 对项目进行打包。但是,在打包过程中可能会想要获取到一些更加详细的信息,比如打包出的文件大小、打包时间等等。那么,如何在 webpack 打包过程中...

    4 年前
  • npm 包 map-json-webpack-plugin 使用教程

    在前端开发中,Webpack 是一个非常重要的工具。而在 Webpack 的配置文件中,通常需要用到各种插件。在这些插件中,map-json-webpack-plugin 这个 npm 包是一个非常好...

    4 年前
  • 使用 atool-build 搭建前端项目

    atool-build 是一个基于 webpack 的前端打包工具,可以将一些繁琐重复的前端工作自动化,例如 less/sass 编译、图片压缩等。npm 包 atool-build 在 React ...

    4 年前
  • npm 包 atool-doc 使用教程

    atool-doc是一个用于生成文档的npm包,适用于前端项目。它可以根据注释自动生成文档,并支持多种格式输出,如Markdown、HTML、JSON等。本文将介绍如何使用atool-doc生成文档,...

    4 年前
  • `atool-test` 使用教程

    atool-test 是一个由阿里巴巴开发的前端自动化测试工具,通过 mocha 和 istanbul 实现了单元测试和代码覆盖率分析功能,同时支持多浏览器测试,易于集成于现有项目中。

    4 年前
  • npm 包 umi-hd 使用教程

    什么是 umi-hd? umi-hd 是一个基于 umi 的高清方案插件,它可以自动根据屏幕尺寸以及屏幕像素比来选择最优或者用户自定义的清晰度,从而达到最佳的高清体验。

    4 年前
  • npm 包 umi-plugin-hd 使用教程

    在移动端开发中,需要适配不同屏幕分辨率的设备,以保证页面在各设备上的显示效果一致。由于这是一项繁琐而且重复性的工作,在过去经常给前端开发带来不少麻烦,甚至导致项目无法按时上线。

    4 年前
  • npm 包 @types/postcss-load-config 使用教程

    概述 @types/postcss-load-config 是一个针对 PostCSS 的声明文件,方便在 TypeScript 项目中使用 PostCSS 的 loadConfig 方法加载配置文件...

    4 年前

相关推荐

    暂无文章