当我使用捆绑器使我的 JS 浏览器兼容时,我导出的函数不会导出。
错误:(索引):11 未捕获类型错误:连接不是函数 在 HTMLButtonElement.onclick ((index):11:46)
index.js(与index.html相同的根文件)
const {ethers} = require("ethers");
async function connect() {
if (typeof window.ethereum !== 'undefined') {
await ethereum.request({method: "eth_requestAccounts"});
}
}
module.exports = {
connect
}
index.html(与index.js相同的根文件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<script src="./index.js" type="module"></script>
</head>
<body>
<button id="connect" onclick="connect()"> Connect </button>
</body>
</html>
使用parcel,它会自动创建一个dist文件并启动本地服务器。 也尝试过 browserify 并遇到了同样的问题。
Parcel 支持脚本标签/模块类型元素。
这段代码对我有用,但 window.ethereum 未定义,它与 MetaMask 没有相关吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML 5 Boilerplate</title>
</head>
<body>
<button id="connect">Connect</button>
<script type="module">
//Import your module
import something from "./index.js";
//Assign event listener to button
document
.getElementById("connect")
.addEventListener("click", function (event) {
something.connect();
});
console.log("something", something);
/* JavaScript module code here */
</script>
</body>
</html>
const { ethers } = require("ethers");
async function connect() {
console.log("Inside connect function");
console.log("window.etherum", window.ethereum);
console.log("ethers", ethers);
if (typeof window.ethereum !== "undefined") {
await ethereum.request({ method: "eth_requestAccounts" });
}
}
module.exports = {
connect,
};
这是一篇旧帖子,但我在这里写下我刚刚找到的解决方案,以防有人想避免几天绝望而无果的搜索
我正在尝试与您所做的相同的事情,但没有任何效果,但是在搜索“如何访问包裹捆绑的功能”而不是如何导出它们之后,我在另一个SO问题中找到了这个解决方案。
最主要的是将任何你想要的东西附加到窗口对象上。因此,不要使用 module.exports、exports defaults 等等,只需执行以下操作即可:
const {ethers} = require("ethers");
async function connect() {
if (typeof window.ethereum !== 'undefined') {
await ethereum.request({method: "eth_requestAccounts"});
}
}
window.connect = connect
运行 Parcel 来捆绑它,然后从任何其他脚本中调用即可
window.connect()
就我而言,我尝试在 SSR 网站中使用 https://motion.dev,它也适用于 ES6 导入
import { animate } from "motion"
window.animate = animate
运行 Parcel 使捆绑包使用任何脚本中的函数
window.animate()
它并不完全导出功能,但您可以从任何需要的地方访问它们。如果有人找到了实际访问包裹导出功能的方法,请分享