En un proyecto de JavaScript, un archivo titulado index.js se puede importar como tal:
import SomeComponent from 'components/some-component' En lugar de tener que especificar index.js .
En mi proyecto, prefiero usar una convención de nomenclatura diferente: some-component.component.js . De esta manera, puedo saber cuál es el archivo de un vistazo (en lugar de tener un millón de index.js ).
Lo que estoy tratando de lograr es que ocurra este mismo patrón de importación para archivos con el patrón *.component.js . En otras palabras:
import SomeComponent from 'components/some-component'Más bien que
import SomeComponent from 'components/some-component/some-component.component.js'Tengo el siguiente (abreviado) jsconfig.json:
{ "compilerOptions": { "baseUrl": "./src", "paths": { "*": ["./*"] } } }¿Alguna idea sobre cómo podría lograrse esto?
¡Gracias por adelantado!
Respuesta corta: no puede personalizar la resolución de importación usando una función (o RegExp ). Para un proyecto web, puede usar una herramienta como Webpack con un cargador personalizado. Pero esa es una solución específica de Webpack que no funcionará con otras herramientas (como hacer Ctrl-clic en VSCode o usar TSC directamente).
Respuesta larga:
La resolución de los archivos JavaScript depende de las herramientas que utilice. Los estándares cambiaron un poco a lo largo de los años, y aunque las cosas están convergiendo hacia ESM, todavía hay muchas inconsistencias.
La resolución del módulo TypeScript se describe aquí: https://www.typescriptlang.org/docs/handbook/module-solution.html Puede tener una baseUrl , combinar varios directorios como uno solo ( rootDirs ) o tener una asignación de path comodín limitada ( https://www.typescriptlang.org/docs/handbook/module-solution.html#path-mapping ). Ya lo usaste en tu pregunta, así que probablemente no te estoy diciendo nada nuevo. Pero, ahí es donde terminan las opciones de configuración de TS. (puede personalizar la resolución del módulo de compilación usando la API de TSC, pero no desde las opciones de configuración de la CLI/herramientas)
NodeJS puede enganchar un mecanismo de resolución para módulos. Por ejemplo, Yarn 2+ hace eso para admitir una característica llamada PNP ( https://yarnpkg.com/features/pnp ). Sin embargo, TypeScript todavía necesita resolver tipos y no usará su mecanismo de carga personalizado para eso. La situación con otras herramientas como Webpack es similar.
La resolución del módulo de Node y TypeScript es específica de esas herramientas. El estándar ESM es aún más estricto: la parte from remitente debe ser una URL absoluta o relativa, o un "identificador simple" que debe mapear utilizando un mapa de importación. En otras palabras, no puede tener un algoritmo personalizado para resolver rutas. La justificación para eso se describe en el repositorio estándar de Import Maps: https://github.com/WICG/import-maps#a-programmable-solution-hook
Conclusión: si realmente desea hacer una resolución de módulo personalizada, puede crear su propia CLI utilizando la API de TSC. Es posible que eso no funcione con otras herramientas, y probablemente sea más fácil acostumbrarse a otra convención de nomenclatura.