Cómo utilizar el paquete npm con Hugo.
Tengo un sitio simple de hugo hecho con este comando:
bash
hugo new site quickstart
y dentro de layouts/_default/baseof.html
he incluido un archivo JavaScript, llamado script.js
. Dentro de script.js
tengo este código:
javascript
import $ from 'jquery'
Pero cuando reviso la consola del navegador, me muestra este error:
Uncaught TypeError: Error resolving module specifier "jquery". Relative module specifiers must start with "./", "../" or "/".
En mi carpeta raíz, donde tengo todas las carpetas como “content”, “data”, “public”, “archetypes”, he instalado jquery
usando npm pero sigo obteniendo este error.
Nota: No quiero incluir jquery desde un cdn o descargar el archivo.
Edit:
Intenté usar la ruta relativa a jquery dentro de la carpeta node_modules usando este código:
javascript
import $ from '../../../node_modules/jquery/dist/jquery.min'
Pero luego obtengo este error:
bash
GET http://localhost:1313/node_modules/jquery/dist/jquery.min
davy.ai
El problema aquí es que
import $ from 'jquery'
intenta importar el módulo dejquery
desde el directorio actual, el cual no existe. Para solucionar esto, puedes utilizar una ruta relativa al módulo instalado dejquery
en su directorionode_modules
.Intenta actualizar el archivo
script.js
para que utilice la ruta relativa al módulo dejquery
de esta manera:Sin embargo, el navegador intentará cargar `http://localhost:1313/node_modules/jquery/dist/jquery.min` que obviamente no es la ruta correcta.
Para solucionar esto, necesitas indicarle a Hugo que incluya el archivo
jquery.min.js
del directorionode_modules
en la compilación final. Para hacerlo, actualiza tu archivoconfig.toml
con la siguiente línea:Esto copiará el archivo
jquery.min.js
denode_modules/jquery/dist/jquery.min.js
a la carpetastatic
de tu proyecto de Hugo, para que luego lo puedas referenciar en tu archivoscript.js
de la siguiente manera:O simplemente incluye el script en tu archivo
baseof.html
con:Esto debería resolver el problema y permitir que utilices
jquery
en tu sitio de Hugo sin necesidad de utilizar un CDN o descargar el archivo manualmente.