ARTICLE DETAIL

资讯详情

深耕编程入门与网站建设的一线实战洞察。

如何在不使用打包工具时通过 CDN 在浏览器中首次使用 fuels SDK

如何在不使用打包工具时通过 CDN 在浏览器中首次使用 fuels SDK 如何在不使用打包工具时通过 CDN 在浏览器中首次使用 fuels SDK【免费下载链接】fuels-tsFuel Network Typescript SDK项目地址: https://gitcode.com/GitHub_Trending/fu/fuels-ts如果你想在浏览器里直接调用 fuels SDKFuel Network 的 TypeScript SDK又不想引入 Vite、Webpack 等打包工具官方文档提供了 CDN 使用方式通过一个 ESMscript标签直接从 CDN 引入 fuels 的浏览器构建产物然后连接 Fuel 网络。本场景适用于纯浏览器环境文档标题即为 CDN Usage (browser only)完成后的可验证结果是成功创建Provider并打印出当前链的名称。前提与适用范围使用场景限定在浏览器中无需本地安装依赖、无需构建步骤。文档中的连接目标为 Fuel 主网的 GraphQL 端点https://mainnet.fuel.network/v1/graphql。浏览器需支持 ESM 模块语法script typemodule文档示例即基于该方式编写。SDK 的浏览器构建产物在 fuels 包 的构建流程中生成build:browser产出dist/browser.mjsbuild:minified再将其压缩为dist/browser.min.mjs——这正是 CDN 示例引用的文件说明该入口是官方发布给浏览器环境使用的产物。执行步骤在 HTML 中通过 CDN 引入 fuels将以下代码放入一个.html文件中用浏览器打开即可运行。其中版本号fuels0.103.0对应文档模板变量{{fuels}}解析后的实际版本即当前仓库 fuels 包 的0.103.0版本script typemodule import { Wallet, Provider, } from https://cdn.jsdelivr.net/npm/fuels0.103.0/dist/browser.min.mjs; const main async () { const provider new Provider( https://mainnet.fuel.network/v1/graphql, ); const { name } await provider.getChain(); console.log(name); }; main(); /script代码各部分的作用import { Wallet, Provider } from https://cdn.jsdelivr.net/npm/fuels0.103.0/dist/browser.min.mjs从 jsDelivr CDN 以 ESM 方式导入 fuels 的压缩版浏览器构建导入了文档示例中展示的Wallet与Provider两个符号。new Provider(https://mainnet.fuel.network/v1/graphql)以主网 GraphQL 端点创建 Provider。若要连接其他网络按官方其他文档如 安装指南 指向的网络连接章节替换对应端点即可本文示例保持文档原值。provider.getChain()获取链信息示例取其中的name字段并打印。结果验证文档给出的验证方式是运行后查看浏览器控制台console.log(name)输出当前链的名称说明 Provider 已成功连接https://mainnet.fuel.network/v1/graphql并完成链信息查询。需要说明的是文档此处只展示了命令与打印语句未固定具体输出值主网链名以实际返回为准不要把某次看到的值当作固定预期。下一步文档为 CDN 用法提供了进一步的 React Example 链接可在 React 组件中使用Provider与Wallet查询账户余额。CDN 方式面向浏览器直接运行若走的是 Node 或前端工程化路线需要先安装 Fuel Toolchain 并执行pnpm add fuels等安装命令请按 Installation 操作而不是使用本文的 CDN 入口。【免费下载链接】fuels-tsFuel Network Typescript SDK项目地址: https://gitcode.com/GitHub_Trending/fu/fuels-ts创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表