使用从不同文件导入时如何扩展类？答案

【问题标题】：How can I extend a class when using import from different files?使用从不同文件导入时如何扩展类？
【发布时间】：2020-08-01 09:13:17
【问题描述】：

我正在尝试制作一个包含一些子类的游戏，这些子类都是从单个文件中导入的。如果我尝试使地图类全局化，它工作正常，但是当我尝试通过扩展引擎使其成为子类时，它说引擎尚未定义。我该如何克服这个问题？

html:

<script type="module">
    import './game.js';
</script>

game.js：

import Engine from './engine.js';
var game = new Engine();

engine.js

import Map from './map.js';
export default class Engine { }

map.js

import Engine from './engine.js';
export default class Map extends Engine { }

错误：

ReferenceError: 在初始化之前无法访问词法声明 `Engine'

【问题讨论】：

【解决方案1】：

看起来这里的问题是您将 Map.js 导入 Engine.js 并将 Engine.js 导入 Map.js，这样它就会创建一个“循环依赖项”。当您使用 webpack 之类的工具编译模块时，这似乎是可能的，但当您使用浏览器原生模块导入时则不然。

【讨论】：