ES6导入多个文件并扩展主对象

Question

我想使用多个导入文件来扩展A中的main.js

// main.js
A = {
    a : 0
};

import './b.js'
import './c.js'
...

export default A;

// b.js
import A from './main.js'

A.b = 1;

// c.js
import A from './main.js'

A.c = 2;

// App.js
import A from './main.js'

console.log(A);

我在console.log(A)中得到的是{ a : 0 }

如何在A中扩展main.js，并在导入到App.js的同时，A将扩展到

A = {
    a : 0,
    b : 1,
    c : 2
}

Answer 1

创建模块时，module.exports自动被初始化为空对象{}。因此，当您执行诸如module.exports = A之类的操作时，您正在执行的操作是将该默认对象替换为对象A。

代码中发生的事情是，您正在定义A但尚未导出它，因此b.js和c.js从main.js导入中收到的不是A，而是默认值module.exports对象，并且是他们正在修改的对象。

因此，您有2个修改main.js的选项，这样它可以工作。第一个是在main.js被其他模块导入之前导出A：

// main.js
A = {};

export default A;

import './b.js'
import './c.js'
...

另一种选择是完全不使用A并直接使用module.exports返回的默认对象

// main.js
import './b.js'
import './c.js'
...