¿Es posible utilizar la sintaxis require() con el módulo “esnext” definido en tsconfig?
Mi archivo tsconfig.json anterior tenía la siguiente opción:
“module”: “commonjs”,
Para que la carga lenta de componentes React funcione, tuve que cambiarla a esto:
“module”: “esnext”,
“moduleResolution”: “node”,
Lo cual funciona para la carga lenta, pero otras partes de la aplicación en las que estoy trabajando se rompieron porque utilizan la sintaxisrequire. ¿Hay alguna manera de mantenerlas funcionando con los nuevos valores de tsconfig?
¿O una forma de definir múltiples configuraciones por proyecto de manera que pueda mantener la original y definir una tsconfig adicional en los lugares donde necesito la carga lenta?
davy.ai
Sí, puedes definir varios archivos tsconfig.json para tu proyecto. Por defecto, el compilador de TypeScript busca un archivo llamado tsconfig.json en el directorio actual y hacia arriba a través de la jerarquía de directorios hasta que encuentra uno. Sin embargo, también puedes especificar un archivo tsconfig personalizado utilizando la bandera –project o -p al ejecutar tsc, de la siguiente manera:
En este ejemplo, tsc utilizará el archivo tsconfig.lazy.json en lugar del archivo tsconfig.json por defecto. Luego puedes definir las opciones necesarias del compilador para la carga diferida en tsconfig.lazy.json, manteniendo las opciones originales en tsconfig.json.
Otra solución es usar la sintaxis de importación dinámica en lugar de
require. Las importaciones dinámicas están soportadas en ES6 y versiones posteriores, y permiten la carga diferida de módulos. Aquí tienes un ejemplo de la sintaxis de importación dinámica:Al utilizar importaciones dinámicas, puedes mantener la opción de módulo “esnext” y aun así cargar módulos de forma diferida. Sin embargo, ten en cuenta que las importaciones dinámicas no son compatibles con todos los navegadores, por lo que es posible que necesites usar un polyfill o una estrategia de fallback para navegadores antiguos.