Question

当我有3个文件（每个文件都包含前一个文件）时，我在理解导出/导入机制时遇到了一些麻烦。

示例：

//fileA.js:
export default MyClass {}

//fileB.js:
import MyClass from './fileA.js';

//fileC.js:
import './fileB.js';

我期望MyClass在fileC中可用，但事实并非如此。你能建议吗？

Answer 1

执行以下操作：

//fileA.js:
export default MyClass {}

//fileB.js:
export { default as MyClass } from './fileA'

//fileC.js:
import { MyClass } from './fileB'

Answer 2

当您导入这样的模块时：

//fileC.js:
import './fileB.js';

它实际上并不导入任何值。它将执行该模块中的全局代码以消除副作用，但不会自行导入值。为了执行您想做的事情，您需要在每个要使用它们的文件中导入模块值。

Answer 3

在您的以下代码中：

//fileA.js:
export default MyClass {}

//fileB.js:
import MyClass from './fileA.js';

//fileC.js:
import './fileB.js';

Myclass仅在fileB中可用，因为它是直接导入的。您的第三行代码不会加载到fileA中。仅仅因为将FileA加载到FileB中并不意味着在我们将FileB导入B中时依赖项就被转移了

要使其可用，我们必须像在文件B中一样将其再次导入文件C：

import MyClass from './fileA.js';

其他`import` `export`语法：

当一个文件导出多个内容时（前面没有默认值），我们可以使用命名导出将其导入，例如：

export class1 {}

export class2 {}

我们正在导出2个类，我们可以使用以下语法导入它们：

import {class1, class2} from './fileA.js';

请记住，现在名称必须与导出的名称匹配，在这种情况下为class1和class2。

我们还可以通过以下方式导入文件的所有导出：

import * as classes from './fileA.js';

classes.class1 // the way to access class1

此语法将所有导出内容放到我们可以确定其名称的对象上（在as关键字之后）。然后，我们可以像通常访问对象的属性一样访问导出。

其他import export语法：