组织大量导入的JavaScript功能

Question

我正在创建一个具有许多互动练习的教育网站。每个练习都有一个生成每个问题/答案组合的功能。目前，我正在从文件中导入所有这些：

import * as exerciseHelpers from "../helpers/exercise_helpers.js";

在辅助文件中，每个练习都具有其功能：

export function exercise1() {
  //stuff for exercise 1
}

export function exercise2() {
  //stuff for exercise 2
}

我担心该文件会很难通过100次练习来维护。另外，我真的不想加载所有功能，只是为了调用与当前练习有关的功能。

当我运行练习时，我会称呼：

   exerciseHelpers[thisExerciseFunction]();

理想情况下，我想在自己的文件练习中创建每个函数1.js/corycorce2.js等，然后才导入我需要的一个。

但是看来我无法基于变量导入功能。

有没有更好的方法来组织此功能，以便每个功能都可以在需要时加载的单独文件中？

Answer 1

在您的helpers目录中创建index.js文件。内部index.js从其各自的文件中导出您的所有功能，例如：

export * from './exercise1.js';
export * from './exercise2.js';

您可以在自己的文件中具有所有实用程序功能，但仍会从index.js.js中导入所有功能：

import * as exerciseHelpers from '../helpers';

或者，您可以用命名导入导入所需的一个：

import { exercise1 } from '../helpers';