webpack项目中跨JS文件访问类失败，如何解决？

这问题我熟！核心原因是你的app.js没有正确导出User类，导致main.js没法拿到这个类的引用。咱们一步步来解决：

方案1：使用默认导出（适配你当前的导入写法） #

修改app.js，把User类设置为默认导出：

// app.js
export default class User {
  constructor(name) {
    this._name = name;
  }
  say() {
    return 'My name is ' + this._name;
  }
}

然后调整main.js的导入和实例化代码——默认导出的模块直接拿到的就是User类本身：

// main.js
import User from './app.js';
let user = new User('Alice');
console.log(user.say()); // 现在会输出 "My name is Alice"

方案2：使用命名导出（更适合多模块导出场景） #

如果之后app.js要导出多个类/方法，推荐用命名导出：

// app.js
export class User {
  constructor(name) {
    this._name = name;
  }
  say() {
    return 'My name is ' + this._name;
  }
}
// 之后还可以加其他导出，比如 export class Admin { ... }

对应的main.js要使用解构导入的方式：

// main.js
import { User } from './app.js';
let user = new User('Alice');
console.log(user.say());

为什么原来的代码不行？ #

你之前的app.js没有添加任何export语句，相当于这个模块对外没有暴露任何内容。这时import app from './app.js'拿到的是一个空对象（或者undefined，取决于模块系统严格模式），自然访问不到app.User。只要按照上面的方式正确导出，Webpack就能正常打包并让代码运行起来啦。

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