如何在Webpack环境下正确导入导出JavaScript模块

1. 修正 my-class.js 代码并正确导出类 #

先修复原代码的拼写错误，再用ES模块语法导出类：

export class MyClass {
  constructor(container) {
    const myElements = container.querySelectorAll(".class");
    for (const myElement of myElements) {
      // 修复拼写错误：addEventListener（原代码少了字母'n'）
      myElement.addEventListener("click", this.doThings.bind(this));
    }
  }

  doThings() {
    // 此处编写你的业务逻辑
    console.log("点击事件触发，执行doThings方法");
  }
}

2. 在 main.js 中导入并正确实例化 #

导入类后，遍历目标DOM元素，将每个元素作为container参数传入实例化：

import { MyClass } from "./path-to-file/my-class.js";

// 确保DOM渲染完成后再执行实例化
document.addEventListener('DOMContentLoaded', () => {
  // 修复原循环的语法错误：给循环变量命名为container
  for (const container of document.querySelectorAll(".class-holder")) {
    new MyClass(container);
  }
});

问题原因说明 #

• "MyClass is declared but it's value is never read"：导入类后未在main.js中实际使用（实例化），添加上述实例化代码后该提示会自动消失。
• "Cannot read property querySelectorAll of undefined"：实例化MyClass时未传入container参数，构造函数中container为undefined，调用querySelectorAll自然报错，必须传入有效的DOM元素。
• 原代码还存在两个语法错误：addEventlistener拼写错误（应为addEventListener），以及自执行函数中for循环缺少变量名（const of需改为const container of）。

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