Question

在简化使用Github API过滤用户和存储库的过程之后，我最近了解到，掌握与API有关的信息（例如API密钥，ID等）是不好的做法。在我的特定情况下，具有client_ID和client_secret。我最近了解了环境变量以及如何将其与dotenv软件包一起使用，但是我在如何使用它方面苦苦挣扎。这是我尝试过的：

我尝试制作一个server.js文件，将环境变量放入env文件后将在其中存储环境变量。我很成功，但是不能在github.js文件中使用它们
我尝试直接在我的 github.js 文件中使用要求 dotenv 包，但是弹出一个错误消息，提示未定义我的类（Github）。
我尝试了将环境变量从 server.js 文件导入和导出到 github.js 文件，但是我的Github类无法访问。

我丢失了某些东西，或者我在使用这些环境变量时都错了吗？

相关代码在下面

github.js

    class Github {
       constructor() {
           this.client_ID = "1037a4472aafe; // Trying to hide this
           this.client_secret = "aaad41dd6b1cf2331"; // Trying to hide this
           this.repos_count = 5;
           this.repos_sort = "created: asc";
       }

       async getUser(user) {
           const profileResponse = await fetch(`https://api.github.com/users/${user}?client_id=${this.client_ID}&client_secret=${this.client_secret}`);
           const repoResponse = await fetch(`https://api.github.com/users/${user}/repos?per_page=${this.repos_count}&sort=${this.repos_sort}&client_id=${this.client_ID}&client_secret=${this.client_secret}`);


           const profileData = await profileResponse.json();
           const repoData = await repoResponse.json();

           return {
               profileData: profileData,
               repoData: repoData
           }
       }
   }

app.js

// Instantiate GITHUB class
const github = new Github;
// Instantiate UI class;
const ui = new UI;

// Search input
const searchUser = document.getElementById("searchUser");

//search input event listner
searchUser.addEventListener("keyup", (e) => {
    // Get input text
    const userText = e.target.value;

    if (userText !== "") {
        // Make HTTP call
        github.getUser(userText)
        .then((data) => {
            if (data.profileData.message === "Not Found") {
                //show alert
                ui.showAlert("User not found", "alert alert-danger");
            }
            else {
                // Show the profile
                ui.showProfile(data.profileData);
                ui.showRepos(data.repoData);
                ui.logInfo(data.profileData);
            }
        });
    }
    else {
        // Clear the profile
        ui.clearProfile();
    }
});

.env

client_ID=1037a4472aafe
client_secret=aaad41dd6b1cf2331

server.js

const express = require("express");
const path = require("path");
const port = process.env.PORT || 8080;
const app = express();

require("dotenv").config();

const client_ID = process.env.client_ID;
const client_secret = process.env.client_secret;


app.use(express.json());
app.use(express.static(path.join(__dirname, "src")));
app.get("*", (request, response) => {
    response.sendFile(path.resolve(__dirname, "src/index.html"))
});

console.log(process.env)

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

Answer 1

您是否正在使用某种bundler？，如果是这种情况，您应该开始研究如何在env中使用bundler变量。

示例：：如果您使用的是webpack，则必须在webpack.config上配置变量。

This post与您的问题有关，但与webpack有关

使用环境变量时遇到问题

1 个答案: