通过一系列文件了解ES6中的导入/导出

Question

I'm having a bit of a trouble understanding export/import mechanism when I have 3 files, each including the previous one.

Example:

//fileA.js:
export default MyClass {}

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

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

My expectation is that MyClass is then available in fileC, but it looks like it's just not the case. Can you advise?

Answer 1

Do like below:

//fileA.js:
export default MyClass {}

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

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

Answer 2

When you import a module like this:

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

it doesn't actually import any values. It will execute the global code in that module for side-effects, but does not import the values themselves. In order to do what you want to do, you will need to import module values in every file you want to use them.

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_a_module_for_its_side_effects_only

Answer 3

In your following code:

//fileA.js:
export default MyClass {}

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

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

Myclass is only going to be available in fileB because this is directly importing this. Your 3th line of code is not going to load in fileA. Just because FileA is loaded in FileB doesn't mean that the dependency gets transferred when we import B in FileC

To make it avialable, we have to import it again in file C like we did in file B:

import MyClass from './fileA.js';

Other import export syntax:

When one file exports multiple things (without the default in front) we can import it in the using named export for example:

export class1 {}

export class2 {}

We are exporting 2 classes, we could import them using the following syntax:

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

Keep in mind that the names now have to match the names of the exports, class1 and class2 in this case.

We could also import all of the exports of a file in the following manner:

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

classes.class1 // the way to access class1

This syntax put all exports on an object of which we can determine the name (after the as keyword). We then can access the exports like we normally access properties of an object.