Estoy creando un sitio web educativo con muchos ejercicios interactivos. Cada ejercicio tiene una función que genera cada combinación pregunta/respuesta. En este momento estoy importando todo esto desde un archivo:
import * as exerciseHelpers from "../helpers/exercise_helpers.js";Dentro del archivo de ayuda cada ejercicio tiene su función:
export function exercise1() { //stuff for exercise 1 } export function exercise2() { //stuff for exercise 2 }Me preocupa que este archivo se vuelva muy difícil de mantener con cientos de ejercicios. Además, realmente no quiero cargar todas las funciones solo para llamar a la relacionada con el ejercicio actual.
Cuando estoy ejecutando el ejercicio llamo:
exerciseHelpers[thisExerciseFunction]();Idealmente, me gustaría crear cada función en su propio archivo exercise1.js/exercise2.js, etc., y luego solo importar la que necesito.
Pero parece que no puedo importar funciones basadas en una variable.
¿Hay una mejor manera de organizar esto para que cada una de estas funciones pueda estar en un archivo separado que se cargue cuando sea necesario?
Cree un archivo index.js en su directorio de helpers . Inside index.js exporta todas sus funciones desde sus respectivos archivos, como:
export * from './exercise1.js'; export * from './exercise2.js'; Luego puede tener todas sus funciones de utilidad en sus propios archivos pero aún así importar todo desde index.js :
import * as exerciseHelpers from '../helpers';O puede importar el que necesita con importación con nombre:
import { exercise1 } from '../helpers';