前端调用 Solidity 智能合约连接 MetaMask 钱包并部署至 Alchemy 测试网

在 package.json 所在目录下新建 webpack.common.js、webpack.dev.js、webpack.prod.js 及 .env 文件。

webpack.common.js

const dotenv = require("dotenv");
dotenv.config();
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js",
    },
    resolve: {
        extensions: [".js", ".ts", ".json"],
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: "ts-loader",
                exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            inject: "body",
        }),
    ],
};

webpack.dev.js

const webpack = require("webpack");
const { merge } = require("webpack-merge");
const baseConfig = require("./webpack.common");

module.exports = merge(baseConfig, {
    mode: "development",
    plugins: [
        new webpack.DefinePlugin({
            'process.env.CONTRACT_ADDRESS': JSON.stringify(process.env.CONTRACT_ADDRESS),
            'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
        }),
    ],
    devServer: {
        historyApiFallback: true,
        port: 8080,
        hot: true
    }
});

webpack.prod.js

const webpack = require("webpack");
const baseConfig = require("./webpack.common");
const { merge } = require("webpack-merge");

module.exports = merge(baseConfig, {
    mode: "production",
    plugins: [
        new webpack.DefinePlugin({
            'process.env.CONTRACT_ADDRESS': JSON.stringify(process.env.CONTRACT_ADDRESS),
            'process.env.DEBUG': JSON.stringify(process.env.DEBUG),
        }),
    ],
});

.env 文件

PRIVATE_KEY=私钥地址
ALCHEMY_API_KEY=ALCHEMY 的 key

package.json 配置

{
    "scripts": {
        "dev": "webpack serve --config webpack.dev.js",
        "build": "webpack --config webpack.prod.js",
        "deploy:local": "npx hardhat run scripts/deploy-counter.ts --network localhost"
    }
}

2. Solidity 代码

在 contracts 目录下新建 Counter.sol 文件。

pragma solidity ^0.8.24;
import "hardhat/console.sol";

contract Counter {
    uint counter;
    event CounterInc(uint counter);

    function count() public {
        counter++;
        console.log("Now, counter is: ", counter);
        emit CounterInc(counter);
    }

    function getCount() public view returns (uint) {
        return counter;
    }
}

3. 编写部署代码

在 package.json 所有目录下新增 scripts 目录，创建 deploy-counter.ts 文件。

import "@nomicfoundation/hardhat-ethers";
import { ethers } from "hardhat";

async function deploy() {
    const Counter = await ethers.getContractFactory("Counter");
    const counter = await Counter.deploy();
    await counter.waitForDeployment();
    console.log('counter address is', await counter.getAddress());
    return counter;
}

async function count(counter: any) {
    await counter.count();
    console.log('count is', await counter.getCount());
}

deploy().then(count);

4. 连接小狐狸钱包

安装 MetaMask 扩展。打开浏览器访问 https://metamask.io/zh-CN/download 下载并添加扩展。

创建钱包时建议使用助记词方式，完全自主控制。屏幕显示 12 个单词后请立即手抄保存，不要拍照。

首先在根目录执行以下命令启动本地以太坊区块链节点：

npx hardhat node

注意控制台输出的地址 http://127.0.0.1:8545/，在 MetaMask 中配置自定义 RPC 网络。

导出测试私钥并导入 MetaMask，确保账户拥有测试 ETH 余额。

5. 启动 Webpack 开发服务器

首先部署合约（在另一个终端窗口）：

npx hardhat run scripts/deploy-counter.ts --network localhost

启动 Webpack 开发服务器：

npx webpack serve --config webpack.dev.js

在浏览器中输入 http://localhost:8080 访问页面。

点击连接按钮授权 MetaMask，然后点击 'increment' 按钮调用合约函数。确认弹窗即代表发送区块链交易，合约计数器将递增并触发事件更新界面。

6. 部署到 Alchemy 测试网

注册 Alchemy 账号并创建应用，获取 API Key。

编辑 .env 文件，填入私钥和 Alchemy API Key：

PRIVATE_KEY=填写刚刚复制的私钥，添加前缀 0x
ALCHEMY_API_KEY=nr6k9FBd4Rvwi83XSr6xR

从 Endpoint URL 复制 Sepolia 网络地址，例如：https://eth-sepolia.g.alchemy.com/v2/${API_KEY}

编辑 hardhat.config.ts 文件，配置 sepolia_eth 网络：

import "hardhat-gas-reporter";
import "@nomicfoundation/hardhat-toolbox";
import "@nomicfoundation/hardhat-ethers";
import "@nomicfoundation/hardhat-verify";
const dotenv = require('dotenv');
dotenv.config();
type Config = import('hardhat/config').HardhatUserConfig;

const config: Config = {
    solidity: "0.8.28",
    networks: {
        hardhat: { chainId: 31337 },
        sepolia_eth: {
            url: `https://eth-sepolia.g.alchemy.com/v2/${process.env.ALCHEMY_API_KEY}`,
            accounts: [process.env.PRIVATE_KEY]
        }
    },
    gasReporter: {
        enabled: true
    }
};
export default config;

修改 tsconfig.json，注释掉 "strict": true 以避免编译错误。

运行部署命令：

npx hardhat run scripts/deploy-counter.ts --network sepolia_eth

成功后，可在 Etherscan 测试网验证器查询合约地址：https://sepolia.etherscan.io/

注意区分主网与测试网，本教程仅涉及测试网部署。