Tengo un sitio HTML/CSS/JavaScript estándar ( repositorio ) que usa módulos ES6. Se puede implementar con éxito en las páginas de GitHub y Netlify.

En mi HTML, importo main.js así:

 <script src="js/main.js" type="module" defer></script>

En mi archivo main.js , importo otros módulos que hice así:

 import * as data from './data.js'; import displayUserCard from './displayUserCard.js';

Ahora también quiero instalar e importar módulos npm para usar en mi sitio tal como uso mi propio código en mi sitio.

Instalo lodash así:

 npm i lodash

Luego, en mi archivo main.js , importo lodash así, tal como lo hago en mis aplicaciones Node:

 import _ from 'lodash';

Esto, por supuesto, no funciona y me da el siguiente error, ya que ahora estamos en el navegador y no en una aplicación de Node:

^ TypeError no detectado: no se pudo resolver el especificador de módulo "lodash". Las referencias relativas deben comenzar con "/", "./" o "../".^

Investigando esto, entiendo que un entorno de desarrollo de este tipo necesita un paquete web, pero encuentro de todo, desde herramientas anticuadas como Browserify y RequireJS, hasta herramientas demasiado complejas como WebPack, hasta paquetes más nuevos como Parcel, Vite y Snowpack que todos don No parece abordar este problema de agrupar fácilmente paquetes npm para compilaciones de desarrollo y producción.

¿Cuál es la forma más sencilla en 2021/2022 de usar módulos de nodo como lodash en aplicaciones frontend HTML/CSS/JavaScript estándar para que puedan agruparse, compilarse e implementarse en CDN como páginas de GitHub, Netlify y Vercel?