时间戳

首页 > 解决方案 > 在javascript中是否可以部分导入“中间模块”？

javascript - 在javascript中是否可以部分导入“中间模块”？

问题描述

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

像这样...

// 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';

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

标签： javascriptecmascript-6

解决方案

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

一种选择是更改thing1andthing2模块，以便它们导出函数，这些函数在运行时会自行加载——这样，它们的初始化可以按需运行，而不是在导入时运行（通常只导入导致的副作用是无论如何都不是一个好主意 - 如果入口点单独可以控制事情何时开始运行，那就更好了）：

// 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）

推荐阅读