Как скрыть свой ключ API в файле script.js с помощью dotenv ⇐ Html

[Anonymous]

Я хочу использовать dotenv, чтобы скрыть свой ключ API.
когда я удаляю require('dotenv').config(); из моего кода и поместил свой ключ API в apiKey:process.env.API_KEY, вместо процесса.env.API_KEY, код работает.
Я установил dotenv, а также проверил свои зависимости< /p>
Я создал папку .env и упомянул API_KEY=2947****
Я создал файл .gitignore и поместил в него .env р>
но когда я попытался использовать его в своем файле script.js, он не работал
require('dotenv').config();

let weather = {

apiKey: process.env.API_KEY,

fetchWeather: function (city) {
fetch(
"https://api.openweathermap.org/data/2.5/weather?q=" +
city +
"&units=metric&appid=" +
this.apiKey
)
.then((response) => {
if (!response.ok) {
alert("No weather found.");
throw new Error("No weather found.");
}
return response.json();
})
.then((data) => this.displayWeather(data));
},

displayWeather: function (data) {

const { name } = data;
const { icon, description } = data.weather[0];
const { temp, humidity,temp_min,temp_max } = data.main;
const { speed } = data.wind;
// const { sunrise, sunset } = data.sys;

document.querySelector(".city").innerText = "Weather in " + name;

document.querySelector(".icon").src ="https://openweathermap.org/img/wn/" + icon + ".png";

document.querySelector(".description").innerText = description;

document.querySelector(".temp").innerText = temp + " °C";

document.querySelector(".humidity").innerText ="Humidity: " + humidity + "%";

document.querySelector(".wind").innerText ="Wind speed: " + speed + " km/h";

document.querySelector(".min").innerText ="Min Temp: " + temp_min + " °C";

document.querySelector(".max").innerText ="Max Temp: " + temp_max + " °C";

// document.querySelector(".sunrise").innerText =
// "Sunrise: " + sunrise + " °C";
// document.querySelector(".sunset").innerText =
// "Sunset: " + sunset + " °C";

document.querySelector(".weather").classList.remove("loading");

// document.body.style.backgroundImage =
// "url('https://source.unsplash.com/1600x900/?" + name + "')";

},

search: function () {
this.fetchWeather(document.querySelector(".search-bar").value);
},

};

document.querySelector(".search button").addEventListener("click", function () {
weather.search();
});

document
.querySelector(".search-bar")
.addEventListener("keyup", function (event) {
if (event.key == "Enter") {
weather.search();
}
});

weather.fetchWeather("Pune");



Подробнее здесь: https://stackoverflow.com/questions/747 ... ing-dotenv