使用 Webpack 的简单 HTML 示例

该示例基于 Cosmos 交易处理部分。

​

运行示例

克隆项目仓库：

git clone https://github.com/InjectiveLabs/injective-ts-webpack-example.git

确保你已安装 npm 并安装依赖项：

cd injective-ts-webpack-example && npm install

运行示例：

npm start
....
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/, http://[::1]:8080/
....

在浏览器中访问 http://localhost:8080/。如果你已设置 Keplr 钱包并连接到 Injective 测试网，你应该会看到”确认交易”弹出窗口。

​

它是如何工作的？

交易逻辑在 src/sendTx.tx 中，由 src/index.html 加载。Webpack 用于将所有内容打包在一起并在本地服务器端点上提供服务。

webpack.config.js 文件配置 Webpack 从 ./src/sendTx.ts 开始打包 TypeScript 应用程序，使用 ts-loader 转译 TypeScript 文件，并包含适当处理 .js 和 .json 文件的规则。它使用 fallback 选项解析 Node.js 核心模块的浏览器兼容版本，在浏览器环境中启用 buffer、crypto 和 stream 等模块。配置使用 HtmlWebpackPlugin 基于 src/index.html 生成 HTML 文件，并使用 ProvidePlugin 自动全局加载 Buffer 和 process 变量。打包输出命名为 bundle.js 并放置在 dist 目录中，devServer 设置为从 ./dist 提供内容用于开发目的。