Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

225
Views
cómo resolver una URL de activo de paquete web en un proyecto de paquete web externo ya creado

Tengo la siguiente situación.

En un proyecto, tengo un montón de activos creados con webpack 5. La estructura de carpetas se ve así:

 assets/ ├─ node_modules/ ├─ dist/ │ ├─ some_css_r4ty.css │ ├─ some_css_rw4s.js │ ├─ some_img_r45t.svg │ ├─ some_img_zt1s.js │ ├─ index.js │ ├─ package.json ├─ src/ │ ├─ some_img.svg │ ├─ some_css.css │ ├─ index.js ├─ .gitignore ├─ package.json ├─ README.md
 //assets/package.json { "main": "./index.js", "exports": { "./some_img": "./some_img_zt1s.js", } }

Ahora en otro proyecto de componentes con la estructura:

 components/ ├─ node_modules/ ├─ src/ │ ├─ some_component.js │ ├─ index.js ├─ .gitignore ├─ package.json ├─ README.md

En some_component.js estoy tratando de referirme a los activos ya incluidos. Una forma de hacerlo es consultar los archivos dist e importarlos como una biblioteca local. Y también agregue @local_assets_lib como externo en la configuración. Entonces puedo hacer:

 //some_component.js import img from '@local_assets_lib/dist/some_img' //can also do import {some_img} from '@local_assets_lib' const comp = () => ( <img src={img}> </img> )

El problema es que, si estoy tratando de hacer eso fuera de un módulo js, tengo que hacer algunos trucos en la configuración de webapck del consumidor para resolver esto. Lo hice pasando un mapa a la configuración del paquete web del consumidor: módulo de biblioteca de activos También podría copiar los archivos sin hash para dist y usarlos para hacer referencia en los archivos css y non js. Pero eso tiene problemas con el cdn si los activos cambian, así como el almacenamiento en caché.

Si uso la propiedad de resolución en el paquete web, simplemente intentará agrupar los activos en mi proyecto de consumo, y no quiero volver a agruparlo.

¿Alguna idea de como resolver esto?

Estaría feliz de reutilizar una declaración como

 .class { background-image: url(import(@local_assets_lib/dist/some_img)); }

o

 .class { background-image: url(require(@local_assets_lib/dist/some_img)); }

y deje que el paquete web obtenga la exportación predeterminada, que será la ruta al activo real, pero no encontré ningún complemento o resolución de URL para eso.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!