wagmi/core 安装完全指南包管理器、CDN 引入与工程化配置【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmiWagmi Corewagmi/core是一个面向以太坊应用的 VanillaJS 库用于管理账户、链、连接器Connectors与客户端Clients的响应式状态。本文以官方安装文档 site/core/installation.md 为骨架讲解如何在你的项目中通过包管理器或 CDN 安装 Wagmi Core 及其配套依赖并补充环境要求、未发布版本尝鲜方式、安装后的第一步配置与安全加固建议帮助你在 React、Vue、Solid 或纯 TypeScript 项目中快速落地以太坊交互能力。安装前了解你要安装哪些包Wagmi Core 本身并不包含框架绑定它是一个框架无关的底层库。官方安装文档明确指出需要安装两个核心包wagmi/coreWagmi 的核心库提供createConfig、getAccount、getConnections等 actions 以及连接器管理能力viem以太坊的 TypeScript 接口层负责执行区块链接口调用RPC、签名、合约读写等。Wagmi Core 是建立在 Viem 之上的封装因此viem是其强制 peer dependency。从仓库根目录的 packages/core/package.json 可以看到当前wagmi/core版本为3.6.4其 peerDependencies 声明为依赖版本要求是否可选viem2.x必选tanstack/query-core5.0.0可选accounts~0.14可选typescript5.9.3可选viem是唯一必装的 peer dependency其余均为可选仅在使用对应功能或类型增强时需要。安装时请务必保证viem的主版本与 Wagmi Core 匹配2.x否则可能出现运行时或类型不兼容问题。如果你还需要连接钱包官方 site/core/getting-started.md 推荐同时安装wagmi/connectors连接器集合包当前版本为8.1.0见 packages/connectors/package.json。连接器负责将 MetaMask、Coinbase Wallet、WalletConnect、Safe 等钱包/账户接入 Wagmi。通过包管理器安装pnpm / npm / yarn / bun官方文档提供了四种主流包管理器的安装命令它们安装的包完全相同只是命令语法不同pnpm add wagmi/core viem2.xnpm install wagmi/core viem2.xyarn add wagmi/core viem2.xbun add wagmi/core viem2.x其中viem2.x中的版本号会随文档模板自动填充为当前 packages/core/package.json 中声明的 peer 版本。实际使用时你可以写viem2让包管理器解析最新的 2.x 版本也可以锁定具体版本以保证可复现构建。如果需要连接钱包请按 site/core/getting-started.md 的 Manual Installation 章节将命令扩展为同时安装连接器pnpm add wagmi/core wagmi/connectors viem2.x框架绑定包React / Vue / Solid虽然本页聚焦于核心库但 Wagmi 还为各框架提供了绑定包安装命令稍有不同见 site/react/installation.md、site/vue/installation.md、site/solid/installation.mdpnpm add wagmi viem2.x tanstack/react-querypnpm add wagmi/vue viem2.x tanstack/vue-querypnpm add wagmi/solid viem2.x tanstack/solid-query框架包额外依赖 TanStack Query异步状态管理器负责请求、缓存等这与核心库的“可选tanstack/query-core”设计一致——框架适配层把核心库的 actions 封装为响应式 hooks/composables 时依赖查询层。通过 CDN 引入ESM如果你不使用包管理器例如在演示页或静态 HTML 中快速体验官方文档提供了基于 ESM 兼容 CDN如 esm.sh的引入方式。在 HTML 文件底部添加script typemodule标签script typemodule import { createClient } from https://esm.sh/viem import { createConfig } from https://esm.sh/wagmi/core3 import { injected } from https://esm.sh/wagmi/connectors /script要点说明CDN 路径中的3对应wagmi/core的 3.x 主版本esm.sh 会自动解析并返回对应版本的 ESM 产物注意这里同时引入了viem用于createClient创建底层客户端与wagmi/connectors用于injected连接器与包管理器安装的依赖集合一致由于 Wagmi Core 是纯 ESM 包package.json中type: moduleCDN 方式天然适合现代浏览器但务必确保目标浏览器支持原生 ES Modules。环境要求现代浏览器与 polyfillWagmi 针对现代浏览器做了优化官方 site/shared/installation.md 声明其兼容最新版本的 Chrome、Edge、Firefox、Opera、Safari站点组件 site/components/Browsers.vue 中维护了这份浏览器清单。需要特别注意两点polyfill 需求根据你的运行环境尤其是较老浏览器或某些受限 WebView可能需要为EventTarget、queueMicrotask等现代 API 添加 polyfill。若遇到兼容性问题建议优先排查运行环境是否支持 Wagmi/Viem 所依赖的 ESM 语法与 Web API。纯 ESM 约束wagmi/core的package.json声明type: module且仅暴露 ESM 产物./dist/esm/exports/index.js因此构建工具需要支持 ESM常见的 Vite、Next.js、Nuxt、Remix 等均无问题。使用未发布版本canary、源码构建与 PR 预览包如果等不及正式发布想提前验证最新功能官方文档提供了三条路径1. canary 标签canary标签持续跟踪main分支的最新构建pnpm add wagmi/corecanarynpm install wagmi/corecanaryyarn add wagmi/corecanarybun add wagmi/corecanary2. 从源码克隆构建并链接克隆 Wagmi 仓库到本地构建后通过pnpm link链接到你自己的项目gh repo clone wevm/wagmi cd wagmi pnpm install pnpm build cd packages/core pnpm link --global然后在你的项目中执行pnpm link --global wagmi/core或你此前使用的包管理器对应的 link 命令。请务必确认 packages/core/package.json 中声明的 peer dependencies尤其是viem2.x已正确安装且版本匹配。3. pkg.pr.new 预览包Wagmi 的每个 Pull Request 都会通过 pkg.pr.new 持续发布预览包可以按 PR 编号或短 commit ID 直接安装pnpm add https://pkg.pr.new/wagmi/core123npm install https://pkg.pr.new/wagmi/core123yarn add https://pkg.pr.new/wagmi/core123bun add https://pkg.pr.new/wagmi/core123其中123替换为实际的 PR 编号或短 commit ID。这种方式非常适合在 review 阶段对改动进行真实验证。安装后的第一步创建 Config 并使用 Actions安装完成后下一步是创建并导出 Wagmi 配置。完整流程见 site/core/getting-started.md核心代码如下完整示例见 site/snippets/core/config.tsimport { http, createConfig } from wagmi/core import { mainnet, sepolia } from wagmi/core/chains import { injected } from wagmi/connectors export const config createConfig({ chains: [mainnet, sepolia], transports: { [mainnet.id]: http(), [sepolia.id]: http(), }, connectors: [injected()], })从 packages/core/src/createConfig.ts 的源码可以看到createConfig还支持以下参数参数默认值作用chains必填配置的链列表第一个链为默认链transports必填与client二选一每条链对应的 viem transport例如http()、webSocket()connectors可选连接器工厂函数列表client可选与transports二选一自定义 viem client 工厂函数multiInjectedProviderDiscoverytrue是否启用 EIP-6963 多注入提供方发现storagelocalStorage状态持久化存储传null可关闭syncConnectedChaintrue连接器切换链时是否同步更新默认链ssrfalse服务端渲染模式禁用部分浏览器端行为配置就绪后即可通过 actions 读取连接与账户信息import { getConnection, getEnsName } from wagmi/core import { config } from ./config const { address } getConnection(config) const ensName await getEnsName(config, { address })更完整的 actions 清单可查阅 site/core/api/actions.mdcreateConfig的全部选项见 site/core/api/createConfig.md。若要在 React/Vue/Solid 等框架中使用请参考 site/core/guides/framework-adapters.md。安全建议以太坊相关项目常常成为窃取用户资产的攻击目标官方 site/shared/installation.md 给出了一系列安全实践锁定依赖版本固定包版本、谨慎升级并检查 lockfile 的变更以降低供应链攻击风险限制新包发布时间npm 支持配置min-release-agepnpm 支持minimumReleaseAge与trustPolicy设置可阻止安装发布过短的新版本包使用供应链安全扫描工具安装 Socket 等工具帮助检测和拦截供应链攻击配置内容安全策略CSP为应用添加 CSP 响应头防御外部脚本在应用中执行锁定 CI 依赖将 GitHub Actions 固定到 commit 而非 tag避免 tag 被篡改。这些建议同样适用于任何引入 Wagmi 生态包的以太坊应用建议在项目初始化阶段就落地。结语本文以 site/core/installation.md 为主线覆盖了 Wagmi Core 的四种包管理器安装方式、CDN 引入、环境要求、未发布版本尝鲜、安装后的 config 创建以及安全加固。安装只是起点接下来可以结合 site/core/typescript.md 挖掘 Wagmi 的类型推导能力通过 site/core/api/actions.md 浏览完整的 actions 集合并参考 site/core/getting-started.md 完成从安装到运行的首个以太坊交互闭环。【免费下载链接】wagmiReactive primitives for Ethereum apps项目地址: https://gitcode.com/GitHub_Trending/wa/wagmi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考