使用Parcel/Browserify打包JS后导出函数未定义报connect不是函数错误

报错核心是作用域不匹配，和使用Parcel还是Browserify没有关系：

• 所有打包工具处理CommonJS/ES模块时，都会把模块代码包裹在独立的函数/模块作用域内，模块内部声明的函数、变量默认不会泄露到全局window对象
• HTML里写的内联事件onclick="connect()"，只会去全局作用域查找connect函数，根本访问不到模块内部定义的connect
• 额外影响因素：给script标签加了type="module"属性，原生ES模块本身就有独立作用域，哪怕不打包，模块内声明的函数也不会被内联事件访问到

二选一即可：

方案1：快速修复（改动最小） #

直接在JS文件里把需要全局调用的connect函数显式挂载到window对象上，不需要修改HTML代码：

const {ethers} = require("ethers");

async function connect() {
    if (typeof window.ethereum !== 'undefined') {
        await ethereum.request({method: "eth_requestAccounts"});
      }
  }

  module.exports = {
    connect
  }

// 手动挂载到全局作用域，供内联onclick调用
window.connect = connect

修改后重新执行打包/启动开发服务即可正常触发函数。

方案2：规范写法（推荐） #

不要用内联onclick事件，把事件绑定逻辑挪到JS里，避免全局污染：

1. 先修改HTML，去掉按钮上的内联onclick属性：

<!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="connectBtn">Connect</button>
  </body>
</html>

2. 修改index.js，在DOM加载完成后获取按钮元素，绑定点击事件：

const {ethers} = require("ethers");

async function connect() {
    if (typeof window.ethereum !== 'undefined') {
        await ethereum.request({method: "eth_requestAccounts"});
    }
}

// DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('connectBtn')
  btn.addEventListener('click', connect)
})

module.exports = {
  connect
}

注意：所有前端模块化工具的核心能力之一就是隔离作用域，永远不要默认模块内的声明会自动暴露到全局，需要跨作用域访问的内容必须做显式的暴露处理。

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