Блог

Внутри svelte.config.js у меня есть это:

     preprocess: autoPreprocess({
        replace: [
            ['API_ENDPOINT', JSON.stringify(process.env.API_ENDPOINT)]
        ]
    }),
 

Он должен заменить строку «API_ENDPOINT», но это не так.

Вот как я его использую:

 async function api(url: string, body = {}, opts = {}) {
    const endpoint = 'API_ENDPOINT';
    console.log(endpoint);
    const res = await fetch(endpoint   url, {
        method: 'POST',
        headers: {
            'Content-type': 'application/json',
        },
        body: JSON.stringify(body)
    });

    if (!res.ok) {
        const err = await res.json();
        throw (err || res.statusText);
    }

    return opts.raw ? await res.text() : await res.json();
}

export default api;
 

Все, что я получаю, это http://localhost:3000/API_ENDPOINT/subscriptions

в вашем svelte.config.js файле вместо

 autoPreprocess({
  replace: [['process.env.NODE_ENV', JSON.stringify(process.env.NODE_ENV)]],
});
 

использовать

 import sveltePreprocess from 'svelte-preprocess'
sveltePreprocess({
  replace: [['process.env.NODE_ENV', JSON.stringify(process.env.NODE_ENV)]],
});
 

Мне кажется, что autoPreprocess это устарело, но README документы были обновлены неправильно.

Вы также можете подумать о выполнении одного из следующих действий:

используйте process.env.API_ENDPOINT напрямую

 const endpoint = process.env.API_ENDPOINT;
 

создайте отдельную функцию javascript для обработки переменных среды

что-то вроде этого

envVars.js

 import dotenv from 'dotenv-flow';
import path from 'path';

dotenv.config({
  path: path.resolve(__dirname, `path-to-your-(.env)-file`),
});

export const getEnvVar = (key) => process.env[key];
 

и используйте его вот так:

 import { getEnvVar } from 'path-to-envVars'
const endpoint = getEnvVar('API_ENDPOINT');
 

если вы уже используете Vite в качестве инструмента сборки

Добавьте переменные в .env файл следующим образом:

 VITE_YOUR_ENV_VAR_GOES_HERE=bar
 

в вашем случае:

 VITE_API_ENDPOINT=your_value
 

затем импортируйте их в отдельный файл javascript или машинописного текста

envVars.js

 export const envVars = {
  API_ENDPOINT: import.meta.env.VITE_API_ENDPOINT
};
 

а затем импортируйте envVars и используйте его как есть:

 import { envVars } from 'path-to-envVars.js'
 

и теперь вы можете читать переменную среды следующим образом:

envVars.myVariable или, в вашем случае const endpoint = envVars.API_ENDPOINT