En primer lugar, debe instalar el paquete dotenv npm

Hazlo escribiendo esto en la terminal:

 npm install dotenv

Pero, dado que Vanilla JavaScript no es compatible con require, puede instalar el paquete requirejs npm

Hazlo escribiendo esto en la terminal:

 npm install requirejs

Luego, puede escribir el siguiente código para usar require en JavaScript estándar:

 var requirejs = require('requirejs'); requirejs.config({ //Pass the top-level main.js/index.js require //function to requirejs so that node modules //are loaded relative to the top-level JS file. nodeRequire: require }); requirejs(['foo', 'bar'], function (foo, bar) { //foo and bar are loaded according to requirejs //config, but if not found, then node's require //is used to load the module. });

Puede leer la documentación de requirejs en https://requirejs.org/

Luego puede usar variables de entorno en JavaScript vainilla.

Lea más sobre esto en https://www.freecodecamp.org/news/how-to-use-environment-variables-in-vanillajs/

Hay una buena manera de resolver esto sin instalar paquetes.

Escribí una respuesta aquí , pero también podría compartirla aquí.

Pude crear una solución de trabajo usando este artículo . Debe modificar los pasos a continuación con sus propias variables, y también puede consultar el artículo para ver el ejemplo base y también obtener más información.

Nota: esta solución es ideal para pequeños proyectos personales en los que la información no es exactamente confidencial, pero simplemente no desea que se muestre de manera tan visible en su código. No lo use para proyectos más grandes que requieran un nivel razonable de medidas de seguridad.

Si su proyecto ya está implementado en Netlify o en una plataforma similar donde puede agregar comandos de compilación/implementación:

1. Ir a la configuración de build
2. Si el archivo de secuencia de comandos para el que desea utilizar las variables está en una carpeta, configure el comando de build de esta manera: cd DIRECTORY-FOR-THE-SCRIPT-FILE && echo -e "export const USERNAME="123";\nexport const PASSWORD="password";" > config.js
3. Si el script está en su carpeta raíz, establezca el comando en este echo -e "export const USERNAME="123";\nexport const PASSWORD="password"; > config.js
4. En su archivo index.html donde importa el script, configure su etiqueta de script para incluir este atributo type="module" es decir <script src="./index.js" type="module"></script>
5. En su archivo de script, importe las variables agregando esta línea al archivo: import {USERNAME, PASSWORD} from "./config.js"
6. Active una nueva implementación manualmente en Netlify, o se implementará automáticamente si ya configuró implementaciones automáticas para el repositorio.
7. ¡Eso es todo!

Esto resolvió el mío y espero que ayude a alguien más✨.