在 webpack 构建之后（通过 gulp） - 切换 JS 脚本停止绑定到所有切换答案

【问题标题】：After webpack build (via gulp) - Toggle JS script stops binding to all toggles在 webpack 构建之后（通过 gulp） - 切换 JS 脚本停止绑定到所有切换
【发布时间】：2021-05-12 11:14:31
【问题描述】：

在我运行 webpack 并转译 + 合并我的所有 (6) 个 js 文件后，我制作的自定义切换功能停止在所有切换上工作。 html <button> 元素的切换工作正常，但 <a> 锚标记的切换停止工作。

如果我停止在我的 html 中引用 bundle.js 并再次引用单独的 js 文件，事情就会像他们所做的那样（和预期的那样）工作。

Webpack 似乎运行良好，没有任何错误。浏览器中没有控制台错误。

这是一个普通的 JS 项目，没有使用 react 或 vue 或其他前端框架。

html 中仍有一些引导程序类，但引导程序已被删除，这些类现在只是残余。

涉及的元素：

仍可用作切换按钮的按钮元素

<button class="navbar-toggler hidden-md-min" type="button" data-toggle="collapse" data-target="#navbar" id="mobileNavToggle" aria-haspopup="true" aria-expanded="false">
  <span class="navbar-toggler-icon"></span>
</button>

由于某种原因停止工作的锚元素

<a id="megaMenuThree"
  href="#"
  data-toggle="dropdown"
  aria-haspopup="true"
  aria-expanded="false"
  class="nav-link dropdown-toggle">Toggle anchor
</a>

涉及的JS

// init dropdowns is called on main.js after everthing loads
export const initDropdowns = () => document.querySelectorAll('[data-toggle~=dropdown]').forEach(setupDropdown);

const setupDropdown = (dropdownToggle) => {
  dropdownToggle.setAttribute('aria-haspopup', 'true');
  dropdownToggle.setAttribute('aria-expanded', 'false');

  let dropdownMenu = dropdownToggle.parentNode.querySelector('.dropdown-menu');

  dropdownMenu.setAttribute('aria-hidden', 'true');

  dropdownToggle.onclick = (evt) => {
    console.log("click happened!");
    evt.preventDefault();
    toggleDropdown(dropdownToggle, dropdownMenu);
  };

  // Toggle needs to close menu when a menu-item is clicked or when something outside the menu is clicked**
  dropdownAutoClose(dropdownToggle);
};

onclick 块中包含的控制台日志会触发按钮，但锚点上没有任何内容，这使它看起来好像没有绑定（或其他什么）。

还有我的 webpack 配置以防万一

const path  = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './source/js/main.js',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  resolve: {extensions: ['.js']},
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './public/js'),
  },
  devtool: 'source-map'
};

我能想到的唯一区别是一个元素是一个按钮（在 webpack 构建后工作），另一个是锚点（由于某种原因在 webpack 构建后不起作用）。

我已经从 webpack 配置中删除了 babel 转译，只是为了确保不是这样，问题仍然存在。当使用 webpack 未捆绑的普通 js 文件时，一切正常。

有人知道为什么会发生这种情况吗？我已经用谷歌搜索并尝试了几个小时来找出问题所在。

请帮忙提前致谢

【问题讨论】：

标签： javascript html webpack babel-loader

【解决方案1】：

好的，经过大量的谷歌搜索和研究，并想知道为什么没有其他人经历过这种事情，我找到了一个适合我的解决方案。

我改变了这个

  dropdownToggle.onclick = (evt) => {
    evt.preventDefault();
    toggleDropdown(dropdownToggle, dropdownMenu);
  };

到这里

dropdownToggle.addEventListener('click', (evt) => {
  evt.preventDefault();
  toggleDropdown(dropdownToggle, dropdownMenu);
});

不知道为什么前者在成为webpacked 后不起作用，但这解决了我的问题。这一定与eventlistener 及其应用方式有关。

如果有人有解释，仍然很高兴听到解释。

【讨论】：