Web3 有什么 JS,探索构建去中心化世界的 JavaScript 工具箱
当我们谈论 Web3 时，脑海中浮现的往往是区块链、智能合约、加密货币和去中心化应用（DApps）这些宏大而抽象的概念，将这些概念从理论变为现实的，正是我们最熟悉的编程语言之一——JavaScript，可以说，JavaScript 是连接传统互联网
Web3 到底有什么 JS 呢？它并非指一种全新的 JavaScript 语言，而是指一系列强大的库、框架和工具，它们扩展了 JS 的能力，使其能够与区块链网络、去中心化存储和智能合约进行交互，如果你是一位前端开发者，想踏入 Web3 的领域，那么下面这个“JS 工具箱”就是你必须了解的。
核心交互层：与区块链对话的窗口
这是 Web3 JS 工具箱中最基础也是最重要的一部分，它们负责让你的应用能够读取区块链数据、发送交易并与智能合约交互。
- ethers.js
- 定位：目前社区最主流、最受欢迎的 JavaScript 库之一。
- 特点：
- 模块化设计：将钱包、合约、提供商等功能清晰地分开，易于理解和使用。
- 强大的合约实例：可以轻松地为智能合约创建交互实例，调用其读写函数。
- 友好的 ABI 处理：ABI（应用程序二进制接口）是 JS 与智能合约沟通的翻译官，ethers.js 对其处理非常优雅。
- 内置钱包功能：可以方便地创建和管理钱包（如助记词、私钥），并处理签名交易。
- 场景：几乎所有的 DApp 前端开发，从简单的钱包连接到复杂的 DeFi 交互，都离不开它。
- web3.js
- 定位：老牌的、由以太坊官方维护的库。
- 特点：
- 历史悠久：是最早的 Web3 交互库之一，拥有大量的历史项目和文档。
- 功能全面：提供了与以太坊生态几乎所有方面交互的 API。
- API 风格：其 API 风格与以太坊的 JSON-RPC 规范高度对应，对于底层开发者来说非常直观。
- 场景：维护旧项目或需要与特定旧版以太坊节点交互时，虽然依然可用，但新项目更倾向于选择更现代的
ethers.js。
前端框架集成：让 Web3 融入你的 UI
现代 Web 开发离不开框架，而如何将 Web3 的能力无缝地集成到 React、Vue 等框架中，是开发者关心的问题。
- wagmi
- 定位：一个为 React 量身打造的、用于与以太坊生态交互的“Hooks 库”。
- 特点：
- React Hooks 优先：将所有复杂的区块链交互逻辑封装成简单的 Hooks（如
useAccount,useContractRead,useWriteContract），让你的 React 组件代码极其简洁。 - 默认多钱包支持：内置了对 MetaMask、WalletConnect 等主流钱包的连接和管理，开箱即用。
- 智能缓存：自动缓存和同步区块链数据，优化了用户体验和性能。
- TypeScript 友好：提供了顶级的类型定义，是 TypeScript 开发者的福音。
- 场景：现代 React DApp 开发的首选，如果你用 React 开发 Web3 应用，
wagmi+viem（见下文）几乎是不二之选。
- viem
- 定位：一个轻量级、类型安全的以太坊交互库，常与
wagmi配合使用。 - 特点：
- 轻量且专注：专注于提供底层的、类型安全的以太坊交互功能。
- wagmi 的基石：
wagmi的许多底层实现都依赖于viem，它提供了创建客户端、处理数据、构建交易等核心工具。 - 场景：通常与
wagmi捆绑使用，作为其强大的底层执行引擎。
钱包与身份管理：用户的数字钥匙
用户如何与你的 DApp 交互？通过他们的加密钱包，这些 JS 库简化了钱包连接和管理的流程。
- WalletConnect
- 定位：一个开源的、跨平台的通信协议，让 DApp 可以安全地与移动端和桌面端钱包连接。
- 特点：
- 跨平台：不仅支持浏览器扩展钱包（如 MetaMask），还完美支持手机钱包（如 Trust Wallet, Rainbow）。
- 安全：通过二维码或链接建立安全通道，私钥永不离开用户设备。
- 标准化：已成为连接 DApp 和移动钱包的行业标准。
- 场景：当你的 DApp 需要支持移动端用户，或者希望提供比
window.ethereum更安全、更灵活的连接方式时。
- @web3modal/ethereum
- 定位：一个由 WalletConnect 团队开发的、用于连接钱包的 UI 组件库。
- 特点：
- 即插即用：提供美观、统一的“连接钱包”弹窗，集成到你的应用中只需几行代码。
- 多钱包支持：内置了对上百种钱包的支持，用户可以自由选择。
- 场景：快速为你的应用添加一个专业、美观的钱包连接界面。
去中心化存储：超越链上的数据世界
区块链本身不适合存储大量数据（如图片、视频、NFT 元数据），去中心化存储是解决方案。
- lighthouse-sdk
- 定位：一个用于与去中心化存储网络（如 IPFS, Filecoin, Arweave）交互的 JavaScript SDK。
- 特点：
- 多协议支持：简化了将文件上传到多个去中心化存储网络的过程。
- 简单易用：提供了简洁的 API，如
lighthouse.upload()，让上传文件变得像调用一个函数一样简单。 - 返回可访问的 CID：上传成功后会返回一个内容标识符，任何人都可以通过这个 CID 从网络中检索你的文件。
- 场景：上传 NFT 的图片和元数据、存储 DApp 的前端静态资源、构建去中心化社交媒体等。
你的 Web3 JS 工具箱
| 工具库名称 | 主要功能 | 核心场景 |
|---|---|---|
| ethers.js | 与区块链交互、智能合约调用、钱包管理 | DApp 核心逻辑，几乎所有 Web3 JS 开发的基础 |
| web3.js | 与区块链交互（官方库） | 维护旧项目，或需要特定底层功能时 |
| wagmi | React Hooks，简化区块链状态和交互 | 现代 React DApp 开发首选 |
| viem | 轻量级、类型安全的以太坊交互库 | 与 wagmi 配合，作为其底层执行引擎 |
| WalletConnect | 安全、跨平台的 DApp 与钱包通信协议 | 连接移动端钱包，提供安全的连接体验 |
| @web3modal | 钱包连接的 UI 组件库 | 快速为应用添加美观的钱包连接界面 |
| lighthouse-sdk | 上传文件到去中心化存储网络（IPFS等） | 存储 NFT 元数据、DApp 静态资源等 |
Web3 的 JS 生态已经非常成熟和强大，它并没有抛弃我们熟悉的 JavaScript，反而在此基础上构建了一个丰富而强大的工具箱，无论你是想构建一个简单的 NFT 展示页面，还是一个复杂的去中心化金融协议，你都能在这里找到合适的工具。
对于前端开发者来说,这无疑是一个巨大的机遇，你所掌握的 JS 技能，正是通往 Web3 世界的“通行证”，从 ethers.js 开始，再到 wagmi，一步步探索，你也能亲手构建出下一代互联网的精彩应用。