javascript - 在javascript中是否可以部分导入 "intermediate module"？

Question

我创建了一个包含许多 Thing 文件的 Things 文件夹，然后在该 Thing 文件夹内创建了一个充当“中间模块”的索引。

像这样...

// things/thing1.js
console.log('thing1 loaded');

const thing1 = () => {
  console.log('Hi from thing1!');
};

export default thing1;

// things/thing2.js
console.log('thing2 loaded');

const thing2 = () => {
  console.log('Hi from thing2!');
};

export default thing2;

// things/index.js
export { default as thing1 } from './thing1';
export { default as thing2 } from './thing2';

当我从中间模块导入任何文件时...

// anotherFile.js
import { thing1 } from '../things';

thing1();

...所有文件均已加载。

# console output
thing1 loaded
thing2 loaded # <-- don't want this to load.
Hi from thing1!

除了...

import thing1 from './things/thing1';
import thing2 from './things/thing2';

...是否可以构建中间模块或导入，以便仅加载正在导入的文件？

Answer 1

您当前代码的一般设置方式，不，这是不可能的。每当导入模块时，它导入的所有内容也将被导入(并且它们的顶级代码将运行)。

一个选择是更改 thing1 和 thing2 模块，以便它们导出函数，这些函数在运行时会加载自身 - 这样，它们的初始化可以按需运行，而不是在导入时运行(仅仅导入而产生的副作用通常不是一个好主意 - 如果入口点单独可以控制事物何时开始运行，那就更好了):

// things/initThing1.js
export default () => {
  console.log('thing1 loaded');

  const thing1 = () => {
    console.log('Hi from thing1!');
  };

  return thing1;
};

和

// anotherFile.js
import { initThing1 } from '../things';

const thing1 = initThing1();
thing1();

(或者，如果其他模块从 index.js 导入，您可以在中间模块中初始化)