0

I'm creating an educational website with a lot of interactive exercises. Each exercise has a function which generates each question/answer combination. At the moment I am importing all of these from a file:

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

Inside the helper file each exercise has its function:

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

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

I am worried this file will get very hard to maintain with 100s of exercises. Also I don't really want to load in all the functions just to call the one relating to the current exercise.

When I'm running the exercise I call:

   exerciseHelpers[thisExerciseFunction]();

Ideally I'd like to create each function in its own file exercise1.js/exercise2.js etc, and then just import the one I need.

But it seems I can't import functions based on a variable.

Is there a better way to organise this so each of these functions can be in a separate file that is loaded in when needed?

DaveR
  • 2,355
  • 1
  • 19
  • 36
  • What do you mean by "loaded"? That makes it sound like some form of code splitting – Andrew Jun 24 '22 at 20:23
  • I mean importing the required functions dynamically based on what is needed, rather than just doing import * from a big file with all the functions for the whole site. – DaveR Jun 24 '22 at 20:25
  • 1
    I think the practice that you followed is good enough for what you want to achieve. Ideally, you can use module bundlers like [Webpack](https://webpack.js.org/) to remove unnecessary imports in the [tree-shaking](https://webpack.js.org/guides/tree-shaking/) process, when you try to create your build chunks. – SMAKSS Jun 24 '22 at 20:31
  • 1
    Functions are instantiated but they are not run until they are invoked. There is very little overhead for function instantiation. You shouldn't need to be worried about "loading when needed". The only way to accomplish this is with code splitting. I don't think it makes sense to have hundreds of build chunks just for this use case – Andrew Jun 24 '22 at 20:33

1 Answers1

0

Create an index.js file in your helpers directory. Inside index.js export all your functions from their respective files, like:

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

Then you can have all your utility functions in their own files but still import everything from index.js:

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

Or you can import the one you need with named import:

import { exercise1 } from '../helpers';
anonDelta
  • 37
  • 9
  • I think what I'd ideally like is that I don't have to list everything manually in the index.js - there's no way to have a system where, when there's a new file in a directory this is imported? – DaveR Jun 24 '22 at 20:43
  • @DaveR well, you could write a custom script for that or use a tool, but I don't think that's supported by the language itself or an IDE. Is this what you are looking for: https://stackoverflow.com/questions/55850891/how-can-i-dynamically-export-components-in-index-js ? – anonDelta Jun 24 '22 at 20:47