模块导入导出问题

Question

我正在尝试导出一个模块，在另一个模块中扩展和导出它，然后将其导入回原始模块中以便使用它，如下所示：

// base-class.js
export class BaseClass {}

import { ExtendedBaseClass } from './extended-base-class.mjs';

console.log(ExtendedBaseClass);

// extended-base-class.js
import { BaseClass } from './base-class.mjs';

export class ExtendedBaseClass extends BaseClass {}

但是失败并出现错误：

ReferenceError: Cannot access 'BaseClass' before initialization, at extended-base-class.js:3:40

根据我对操作顺序的理解，这似乎不合逻辑，那么问题是什么以及如何解决它？

对于上下文：我当前的解决方案是将所有内容都放入同一个文件中，但我想将其移动到单独的文件中，因为我的实际课程非常长，因此我想将其分开。

Answer 1

ES6 模块始终先解析其导入，然后再执行其主体。因此，在您的情况下，基类将首先尝试导入扩展基类，甚至在从自身导出基类之前。由于扩展基类首先尝试导入基类，因此此时它尚未初始化，因此您会收到错误。

您可以做的是将基类和扩展基类移动到两个单独的文件，然后使用第三个文件导入扩展基类

//base.js

export class BaseClass {}

//扩展

import { BaseClass } from './base.js';
export class ExtendedBaseClass extends BaseClass {}

//索引

import { ExtendedBaseClass } from './extended.js';
console.log(ExtendedBaseClass);

或者，如果您使用 CJS 模块系统，您的方法将会起作用，因为我们在 CJS 中使用的

require

语句（相当于此处的

import

）的工作方式与普通函数调用类似。所以只有当执行到该行时才会执行