浏览器调用ethers.getContractFactory报错，无Webpack环境下如何正确导入？

问题原因 #

getContractFactory是Hardhat的@nomiclabs/hardhat-ethers插件提供的工具方法，并非标准ethers.js库的内置API，所以直接通过CDN引入的ethers.js不会包含这个方法。

无打包工具的解决方案 #

不需要Webpack等编译工具的话，直接使用ethers.js原生的ContractFactory类或Contract类即可实现NFT铸造，步骤如下：

1. 准备合约ABI和字节码

从Hardhat编译后的产物（通常在artifacts/contracts/[你的合约名].sol/[你的合约名].json文件中）提取abi和bytecode字段，保存为变量。

2. 方式一：部署并铸造NFT（如果需要部署新合约）

import { ethers } from "https://cdn-cors.ethers.io/lib/ethers-5.5.4.esm.min.js";

// 替换为你的NFT合约ABI和字节码
const NFT_ABI = [/* 你的合约ABI数组 */];
const NFT_BYTECODE = "0x..."; // 你的合约字节码

// 连接浏览器钱包（如MetaMask）
const provider = new ethers.providers.Web3Provider(window.ethereum);
await provider.send("eth_requestAccounts", []);
const signer = provider.getSigner();

// 创建ethers原生合约工厂
const nftFactory = new ethers.ContractFactory(NFT_ABI, NFT_BYTECODE, signer);

// 部署合约
const nftContract = await nftFactory.deploy();
await nftContract.deployed();

// 调用铸造方法
await nftContract.mint(await signer.getAddress());

3. 方式二：调用已部署合约铸造NFT

如果合约已经部署到链上，直接实例化合约即可：

import { ethers } from "https://cdn-cors.ethers.io/lib/ethers-5.5.4.esm.min.js";

const NFT_ABI = [/* 你的合约ABI数组 */];
const CONTRACT_ADDRESS = "0x..."; // 已部署的合约地址

// 连接浏览器钱包
const provider = new ethers.providers.Web3Provider(window.ethereum);
await provider.send("eth_requestAccounts", []);
const signer = provider.getSigner();

// 实例化已部署合约
const nftContract = new ethers.Contract(CONTRACT_ADDRESS, NFT_ABI, signer);

// 执行铸造
await nftContract.mint(await signer.getAddress());

核心区别 #

Hardhat的getContractFactory是封装了编译产物加载、环境集成的便捷方法，而浏览器环境下需要手动传入ABI和字节码，使用ethers.js原生的类来完成合约部署或交互。

内容的提问来源于stack exchange，提问作者Msantamaria