Soy nuevo en svelte y me gustaría usar algunas variables de entorno como base_url en diferentes componentes. Sé que puedo definir la tienda y poner esos valores allí, como:
const Store = writable([ { base_url: "http://127.0.0.1:8080", } ]);y cada vez que importo la tienda al componente usando
let base_url = ""; import Store from "../stores/Store.js"; Store.subscribe((data) => { base_url = data.base_url });Pero eso implica una gran cantidad de código repetitivo, y creo que la tienda es más adecuada para datos dinámicos en lugar de valores estáticos. Entonces, me pregunto cuál es la forma más idomática/conveniente de hacerlo.
La forma en que hago esto principalmente es crear un archivo llamado environment.js o algo así y poner todas mis variables de entorno allí. Entonces solo necesito importarlos donde los necesito.
// environment.js: export const base_url = '..'; // somewhere-else.js/somecomponent.svelte: import { base_url } from './path/to/environment.js';Esto también facilitará la sustitución de estas variables dependiendo de si se encuentra en modo de desarrollo o de producción. Luego, puede agregar fácilmente soluciones de reemplazo (reemplazando el valor de la variable con lo que se ajuste) que dependen de la configuración que use (Acumulación: resumen-complemento-reemplazo, Vite: archivos env, etc.).
Mi estructura es así:
src/config/endpoint.js
//src/config/endpoint.js let base_url = ''; switch(ENV){ case ENV_PROD: base_url = 'http://www.example.com/api'; break; case ENV_TEST: base_url = 'http://www.example.com/test_api'; break; default: base_url = 'http://localhost:3301/api'; break; } export base_url; Ahora importe endpoint.js en sus componentes o archivo y utilícelo así:
//App.svelte import { base_url } from './../config/endpoint.js';