En mi proyecto React JS, configuré un jsconfig.json de modo que puedo exportar directorios anidados de forma recursiva e importar una exportación específica desde el directorio base de la siguiente manera:
jsconfig.json :
{ "compilerOptions": { "jsx": "react", "baseUrl": "src" } }Estructura de la carpeta del proyecto:
react-app src common index.js services ServiceA.js ServiceB.js index.js components ComponentA.jsx index.js pages pageA PageA.jsx index.js App.jsx index.js Ahora en cada index.js exportaría todo desde cada archivo/carpeta. Entonces, por ejemplo, en common/services/index.js :
export * from 'common/services/ServiceA.js'; export * from 'common/services/ServiceB.js'; Y en common/index.js :
export * from 'common/services'; export * from 'common/components'; Ahora bien, si necesito ServiceA exportado desde ServiceA.js en el archivo PageA.jsx , podría importarlo de la siguiente manera:
// PageA.jsx import { ServiceA } from 'common'; // ServiceA.js export class ServiceA { doStuff () { // do stuff } }¿Cómo puedo configurar mi proyecto de servidor NodeJS para permitir exportaciones e importaciones similares?
Me gustaría hacer esto para mantener la coherencia entre FE y BE, de modo que pueda transferir fácilmente cualquier código FE a mi proyecto BE sin tener que realizar cambios significativos en las exportaciones e importaciones.
Editar: Logré que funcionara usando la respuesta de Besworks a la que otorgué la recompensa, sin embargo, VS Code Intellisense no navegaría a la definición de exportación desde la declaración de importación hasta que agregué un jsconfig.json en la raíz del proyecto:
{ "compilerOptions": { "baseUrl": "./src", "paths": { "#common" : ["./common/index.js"] } } }Puede asignar exportaciones en su package.json :
{ "name": "@your-namespace/your-package", ... "exports": { ".": "./index.js", "./common": "./common/index.js" } }Luego puede referirse a las exportaciones por nombre:
import { YourClass } from '@your-namespace/your-package'; import { AnotherClass } from '@your-namespace/your-package/common'; Alternativamente, si sus submódulos solo necesitan ser accesibles desde dentro de su paquete, podría asignar imports en lugar de exports , lo que no necesitaría el nombre de su paquete antepuesto, pero debe comenzar con un carácter # . Tampoco necesita especificar explícitamente cada submódulo, puede mapear todo desde dentro de una carpeta con sustitución de comodín:
{ "name": "your-package", ... "imports": { "#common": "./common/index.js", "#common/services": "./common/services/index.js", "#common/services/*": "./common/services/*.js", "#shortcut": "./deeply/nested/path/to/module.js" } }Y úsalos:
import { YourClass } from '#common'; import * from '#common/services'; import { AnotherClass } from '#common/services/ServiceA'; import something from '#shortcut'; En el ejemplo anterior, #common sería una referencia a ./common/index.js y #common/services/ServiceA apuntaría a ./common/services/ServiceA.js .
Nunca debe exportar todos los paquetes.
El módulo/paquete de importación/requerimiento de nodejs se encarga de todas las dependencias y el almacenamiento en caché del módulo.
Muy similar a - https://www.youtube.com/watch?v=-5wpm-gesOY ;)
Si su proyecto de nodo usa "type": "module" en package.json , entonces la estructura de archivos es exactamente la misma. Sin embargo, la importación desde archivos de índice en módulos ES todavía está detrás de una bandera experimental:
https://nodejs.org/api/esm.html#customizing-esm-specifier-solution-algorithm
Entonces tendrías que lanzarlo con, por ejemplo:
node --experimental-specifier-resolution=node src/index.js $ tree src/ src/ ├── common │ ├── index.js │ ├── ServiceA.js │ └── ServiceB.js ├── index.js └── other ├── index.js ├── OtherA.js └── OtherB.js src/index.js
import { serviceA, serviceB } from './common'; import { otherA, otherB } from './other'; serviceA(); serviceB(); otherA(); otherB(); src/common/index.js
export * from './ServiceA'; export * from './ServiceB';`src/common/ServiceA.js'
export const serviceA = () => console.log('***** ServiceA');