Tengo una aplicación web simple (sin marcos) que estoy empaquetando con Parcel . Tiene una carpeta de pages y una carpeta de components . Los componentes son solo bits de html que quiero reutilizar en toda la aplicación. Las páginas son los puntos de entrada del paquete ( páginas de parcel build pages/index.html pages/*/*.html ). Los componentes están hechos de un archivo html y un archivo javascript . Importo el html en javascript con bundle-text: , creo un elemento DOM con el resultado de la cadena y luego lo agrego al documento. Luego, el archivo javascript se importa en archivos en el directorio de pages . El problema es que si uso una etiqueta de anclaje dentro de un componente donde href apunta a un archivo en /pages el paquete se rompe. No puede resolver las rutas correctamente. Si uso una ruta relativa a donde se importa el componente, por ejemplo. <a href="/someFolderInPages/index.html> Parcel no puede encontrar el archivo correcto: @parcel/core: Failed to resolve '/someFolderInPages/index.html' from './components/comp-1/index.html' . Si uso una ruta que va de /components a /pages por ejemplo, <a href="../pages/someFolderInPages/index.html> dice: Error: Bundles must have unique names . ¿Hay alguna manera de solucionar esto o debo dejar el archivo html en los componentes por completo?
Cuando hace referencia a páginas de componentes con el estilo /someFolderInPages/index.html , es probable que se espere el error que obtiene: el / al principio es un "especificador absoluto" y le dice a la parcela que comience en la raíz del proyecto . Por lo tanto, probablemente necesite escribir /pages/someFolderInPages/index.html o /src/pages/someFolderInPages/index.html (dependiendo de cómo esté estructurado su proyecto) para que el paquete pueda encontrar el archivo fuente que desea correctamente.
Sin embargo, eso realmente no resolverá su problema, porque el segundo error que obtiene (cuando usa el estilo "../pages/someFolderInPages/index.html" ) es lo que sucederá cuando su paquete resuelva la dependencia. Me parece que esto es un posible error en el paquete; no dude en presentar un problema de github si lo desea.
Sin embargo, podría haber una mejor manera de lograr lo que desea que tenga el efecto secundario de evitar este error. Dijiste "Los componentes son solo fragmentos de html que quiero reutilizar en toda la aplicación". tiempo.
Parcel puede hacer exactamente esto con plantillas .pug (consulte los documentos de parcela y los documentos de pug ).
Por ejemplo, un "componente" podría tener algún fragmento reutilizable de html (expresado en sintaxis pug):
/src/components/algunComponente.pug
a(href="../pages/someFolderInPages/index.pug") Link from a component to a pageEntonces, podrías incluirlo en una "página" como esta:
/src/page/otraCarpetaEnPaginas/index.pug
doctype html html body h1 The link from the component will show up below: include ../../components/someComponent.pug Parcel se encargará de crear la página en tiempo de compilación (convirtiéndola en un archivo .html ), por lo que no es necesario descargar y ejecutar un paquete de JavaScript por separado en tiempo de ejecución solo para insertar algo de HTML.