esbuild未打包HTML内联事件调用的JS函数如何解决

你定义的函数默认只存在于esbuild打包后的模块作用域中，不会暴露到全局window对象，而HTML内联事件只会在全局作用域查找对应函数。同时esbuild的tree shaking机制会自动剔除没有在JS模块内部被引用的代码，仅添加export关键字不会生效，因为没有其他模块导入这些函数，依然会被判定为未使用代码。

• 方法1：将需要被内联事件调用的函数手动挂载到全局window对象
  直接修改主入口JS的函数定义即可，无需调整esbuild配置，示例代码：

  // 原写法
  // function askuser(inpv) { ... }
  // 改成挂载到window
  window.askuser = function(inpv) {
    var st = "";
    if (inpv === 'newform'){
      // 原有逻辑不变
    }
  }
  // 同理处理 keeptopbar、reltopbar 函数
  

• 方法2：在package.json的构建命令中关闭esbuild的tree shaking功能
  如果你不需要tree shaking优化，可以直接在打包参数中添加--tree-shaking=false，示例package.json的scripts配置：

  {
    "scripts": {
      "build": "esbuild 你的入口文件路径 --bundle --tree-shaking=false --outfile=输出文件路径"
    }
  }
  

  该配置会保留入口文件内所有定义的函数，不会自动剔除未被模块内部引用的代码。

  提示：关闭tree shaking会导致打包体积变大，非必要情况更推荐使用方法1或方法3。

• 方法3：放弃HTML内联事件，改用JS绑定事件
  在主入口JS中通过addEventListener绑定交互事件，esbuild会自动识别函数被引用，不会被剔除，示例代码：

  // 原有函数定义不变
  function askuser(inpv) { 
    var st = "";
    if (inpv === 'newform'){
      // 原有逻辑不变
    }
  }
  // 新增事件绑定逻辑
  const ndbBtn = document.getElementById('ndb')
  ndbBtn.addEventListener('mouseenter', keeptopbar)
  ndbBtn.addEventListener('mouseleave', reltopbar)
  ndbBtn.addEventListener('click', () => askuser('newform'))
  

  同时删除HTML标签上的onmouseenter、onmouseleave、onclick内联事件属性即可。

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