模块脚本Import/Export问题：如何让main.js获取其他脚本对象？

1. 先在子模块中导出需要共享的对象 #

你需要在greenZombie.js和marcusSprite.js里，把要让main.js调用的对象用export暴露出来，两种常用方式：

命名导出（适合多个对象） #

如果模块里有多个需要共享的变量/对象，用命名导出：

// greenZombie.js
// 导出僵尸对象
export const greenZombie = {
  x: 100,
  y: 200,
  draw(ctx) {
    // 这里写绘制僵尸的逻辑
  }
};

// 额外导出僵尸的尺寸常量
export const ZOMBIE_SIZE = { width: 50, height: 80 };

marcusSprite.js同理：

// marcusSprite.js
export const marcusSprite = {
  x: 50,
  y: 200,
  draw(ctx) {
    // 绘制角色的逻辑
  }
};

默认导出（适合单核心对象） #

如果每个模块只有一个核心对象（比如一个类或一个实例），用默认导出更简洁：

// greenZombie.js
const greenZombie = { /* 你的僵尸对象定义 */ };
export default greenZombie;

2. 在main.js中导入子模块的对象 #

根据子模块的导出方式，对应导入：

导入命名导出的对象 #

用大括号包裹要导入的名称，注意路径必须是相对路径（加./或../）：

// main.js
// 导入greenZombie.js里的命名对象
import { greenZombie, ZOMBIE_SIZE } from './greenZombie.js';
// 导入marcusSprite.js里的角色对象
import { marcusSprite } from './marcusSprite.js';

// 游戏循环里直接调用对象的方法
function gameLoop() {
  ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  greenZombie.draw(ctx);
  marcusSprite.draw(ctx);
  requestAnimationFrame(gameLoop);
}
gameLoop();

导入默认导出的对象 #

默认导出的对象可以自定义导入名称：

// main.js
import GreenZombie from './greenZombie.js';
import MarcusSprite from './marcusSprite.js';

// 如果是类的话可以实例化，直接用对象的话直接调用方法
GreenZombie.draw(ctx);
MarcusSprite.draw(ctx);

3. 关键注意点 #

• 路径必须正确：导入时不能省略相对路径前缀，比如import ... from 'greenZombie.js'会报错，必须写成./greenZombie.js
• HTML引入脚本要加type="module"：所有涉及的脚本都要指定type="module"，而且只需要引入main.js即可，子模块会被自动加载：

<script type="module" src="./main.js"></script>

• 避免循环引用：不要出现main.js导入greenZombie.js，同时greenZombie.js又导入main.js的情况，会导致模块加载失败

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