importmap:require - Libs JS de terceros
Keep on Learning!
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeEn nuestro código, podemos utilizar declaraciones import con rutas relativas, clases ES6: todo a lo que estamos acostumbrados. Es lo de siempre. Excepto, ¿cómo podemos utilizar paquetes de terceros?
Como vimos antes, podemos importar cosas a través de una URL completa, como import _ from, y yo pegaré la URL CDN que usamos antes. Hecho esto, el resto es normal: añade _.camelCase() al registro.
| // ... line 1 | |
| import _ from 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/+esm'; | |
| // ... lines 3 - 4 | |
| console.log(_.camelCase(mix.describe())); |
Si refrescamos y comprobamos la consola... funciona. Pero no me gusta! No quiero tener que incluir esta URL loca en todas partes donde utilice lodash. ¿Y qué pasa si actualizamos Lodash... y tengo que cambiar la URL en 10 archivos diferentes? ¡Qué pena!
importmap:require para obtener paquetes de nodos
Si utilizáramos un sistema de compilación, como Webpack, podríamos simplemente decir
yarn add lodash
o
npm install lodash
No estamos utilizando yarn ni npm, pero podemos hacer casi lo mismo. En el terminal, abre una nueva pestaña y ejecutaphp bin/console importmap:require seguido del nombre del paquete NPM que queremos: lodash:
php bin/console importmap:require lodash
¡Listo! Ha añadido lodash a importmap.php y nos dice que podemos utilizar el paquete como de costumbre. Esto significa que podemos decir import _ from 'lodash'... y todo funcionará correctamente.
| // ... line 1 | |
| import _ from 'lodash'; | |
| // ... lines 3 - 6 |
¿Cómo? Cuando ejecutamos el comando, hizo un pequeño cambio: añadió esta sección a importmap.php. Y aunque esto sea genial, no es magia. Entre bastidores, el comando fue a la CDN de JSDelivr, encontró la última versión de lodash, y luego añadió el conjunto de claves lodash a esa URL.
Si te acercas y miras la fuente de la página... ¡no hay sorpresa! ¡Tenemos una nueva entrada lodashdentro de la importmap! Cuando nuestro navegador ve import _ from 'lodash', busca lodash dentro de importmap, encuentra esta URL y la descarga desde allí. ¡Nuestro navegador es el héroe!
Informar a tu editor sobre los paquetes
Una pega es que no tenemos autocompletado en nuestro editor. Dice "Módulo no instalado". Y si digo _.... en realidad no funciona. Autocompleta camelCase... pero sólo porque lo estoy usando aquí abajo.
Espero que PhpStorm lo soporte mejor pronto. Hay una solución, pero es un poco manual. Copia el paquete, entra en base.html.twig y añade una etiqueta temporal<script> que apunte a esto. Pulsa "alt" + "enter" y selecciona "Descargar biblioteca". Esto lo descarga en la sección "Bibliotecas externas" de aquí abajo: /lodash.
Vale, elimina la etiqueta script. De nuevo en app.js, seguirá subrayando la importación como si no supiera lo que es, pero autocompleta cuando usamos _. algo. Por ejemplo, tail() es de lodash.
Actualizar paquetes
¿Qué pasa con la actualización de las versiones de los paquetes dentro de importmap? Vaya, ¡hay un comando para eso!
php bin/console importmap:update
Eso hará un bucle a través de cada paquete y actualizará su URL a la última versión. Ésta ya es la última versión... pero si la cambiamos a .19... y luego ejecutamos el comando update... retrocede hasta .21. El comando podría ser más flexible -como permitirte actualizar sólo un paquete, o tener algunas restricciones de versión- y esas cosas podrían añadirse en el futuro.
| // ... lines 1 - 15 | |
| return [ | |
| // ... lines 17 - 20 | |
| 'lodash' => [ | |
| 'url' => 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/+esm', | |
| ], | |
| ]; |
Descargar paquetes localmente
Por último, si no quieres depender de la CDN, no tienes por qué hacerlo. Para evitarlo, cuando necesites el paquete -o en cualquier momento posterior- pasa la opción --download:
php bin/console importmap:require lodash --download
En importmap.php, esto sigue mostrando la URL de origen a la CDN, pero descarga ese archivo en un directorio assets/vendor/. Este downloaded_to apunta a la ruta lógica de ese archivo.
| // ... lines 1 - 15 | |
| return [ | |
| // ... lines 17 - 20 | |
| 'lodash' => [ | |
| 'downloaded_to' => 'vendor/lodash.js', | |
| // ... line 23 | |
| ], | |
| ]; |
¿Cuál es el resultado? Cuando vamos y actualizamos .... y "Vemos la fuente de la página"... ¡el importmapapunta ahora al archivo local! Ya no dependemos de la CDN.
Pero... ¿y ahora qué? ¿Confirmamos este archivo vendor/lodash.js? La respuesta es... sí. Al menos en este momento, esa es la única forma de versionar ese archivo y mantenerlo en tu repositorio.
Así que, incluso sin npm ni yarn, podemos utilizar cualquier paquete npm que queramos. Pero a veces, en lugar de importar un paquete entero, puede que sólo queramos importar un archivo concreto. Hablemos de cómo podemos hacerlo a continuación.
So this is the first time I am using AssetMapper instead of WebpackEncore and the idea and implementation sounds great. Using public npm packages like bootstrap works without any problem.
But how can I use a private npm package?
I yarn-added the private package, so that it is in the node_modules directory, but obviously - as expected - I can still not use it in the app,js.
If I try to do so, I get the error in my console:
To get rid of that, I would have to add something like this to my importmap.php:
But that would only work if the directory would be inside asstes/vendor, but it is inside node_modules and I can not point to node_modules, or can i somehow?
Do I still need webpack encore for my usecase, or is there a way to use private npm packages with AssetMapper?
Edit:
What I do right now, as a workaround is that I added a postinstall one-liner in the package.json that copies from node_modules into assetss/vendor (for that specific package):
But I guess there might be a more elegant solution?