WordPress中Webpack打包的alertHi函数无法调用求助

1. 函数无法调用：Webpack默认将代码包裹在IIFE（立即执行函数表达式）中，导致alertHi()仅存在于局部作用域，全局无法访问，因此内联onclick调用时提示未定义。
2. jQuery未定义：WordPress默认以noConflict模式加载jQuery，且若脚本未正确声明依赖，会出现加载顺序问题，触发jQuery is not defined错误。

一、解决函数全局访问问题（二选一即可） #

方案1：将函数暴露到全局作用域 #

修改inc/Components/Darkmode/src/alertHi.js，把函数挂载到window对象：

function alertHi() {
  // 你的原有逻辑
  console.log('执行alertHi');
  alert('Hi');
}

// 暴露到全局
window.alertHi = alertHi;

重新用Webpack打包后，内联onclick="alertHi()"即可正常调用。

方案2：改用事件监听（推荐，更符合模块化规范） #

1. 修改HTML标签，添加标识类：

<a href="#" class="darkmode-trigger">☀️</a>

2. 在alertHi.js中用原生JS绑定事件（无需暴露全局函数）：

function alertHi() {
  console.log('执行alertHi');
  alert('Hi');
}

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const trigger = document.querySelector('.darkmode-trigger');
  if (trigger) {
    trigger.addEventListener('click', (e) => {
      e.preventDefault(); // 阻止默认跳转行为
      alertHi();
    });
  }
});

二、解决jQuery未定义问题 #

如果必须使用jQuery，按以下步骤处理：

1. 在WordPress主题的functions.php中注册脚本时，声明依赖jQuery：

wp_enqueue_script(
  'alert-hi-script',
  get_template_directory_uri() . '/dist/alertHi.min.js',
  array('jquery'), // 声明依赖jQuery
  '1.0.0',
  true // 放在footer加载，优化性能
);

2. 在alertHi.js中使用WordPress兼容的jQuery写法：

// 用jQuery的ready方法，内部可直接用$代替jQuery
jQuery(document).ready(function($) {
  $('.darkmode-trigger').on('click', function(e) {
    e.preventDefault();
    alertHi();
  });
});

3. （可选）修改Webpack配置，避免打包jQuery：
   在webpack.config.js中添加externals配置，告知Webpack jQuery是外部依赖：

module.exports = {
  // 其他配置项
  externals: {
    jquery: 'jQuery'
  }
};

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