Browserify 后 Dotenv 未定义

Question

当我使用 API 密钥以字符串格式运行我的代码时，此代码有效， 但我想使用 .env 变量。 我已经安装了npm install dotenv，在同一目录中创建了一个 .env 文件。 我知道要使用 .env，您需要在脚本中尽早require("dotenv").config()。

由于不能在浏览器中使用require，所以我安装了npm install -g browserify。

当我运行 browserify main.js -o bundle.js 并更改索引中的 javaScript 源时，此代码仍然有效。

当我取消注释 //require("dotenv").config() 并使用 const apiTest = process.env.API_KEY 进行身份验证时，问题就出现了。

错误：

    Uncaught (in promise) TypeError: data is undefined
    updateScreen http://127.0.0.1:8080/bundle.js:765
    promise callback*updateScreen http://127.0.0.1:8080/bundle.js:764
    [4]</</</< http://127.0.0.1:8080/bundle.js:783
    EventListener.handleEvent*[4]</</< http://127.0.0.1:8080/bundle.js:781
    [4]</< http://127.0.0.1:8080/bundle.js:786
    [4]< http://127.0.0.1:8080/bundle.js:786
    o http://127.0.0.1:8080/bundle.js:1
    r http://127.0.0.1:8080/bundle.js:1
    <anonymous> http://127.0.0.1:8080/bundle.js:1
bundle.js:765:25

Bundle.js:765:25:

function updateScreen() {
  //data is a random word, but it represents the return of  getSuggestions()
  getSuggestions().then((data) => {
    const arrayLengde = data.quotes.length;
    if (1 >= arrayLengde) {
      let poem = data.quotes[0].body;
      let poemAuthor = data.quotes[0].author;
      document.getElementById("author").innerHTML = poemAuthor;
      document.getElementById("responseField").innerHTML = poem;
    } else if (1 <= arrayLengde) {
      const randomIndex = Math.floor(Math.random() * arrayLengde);
      poem = data.quotes[randomIndex].body;
      poemAuthor = data.quotes[randomIndex].author;
      document.getElementById("author").innerHTML = poemAuthor;
      document.getElementById("responseField").innerHTML = poem;
    }
  });
}

它被定义是因为如果我不使用 .env 就可以工作。 在检查了 Get request HEADER 后，我发现这是我发现的：

Status 401

Authorization: Token token=undefined

Main.js：

//DOTENV with help from Browserify
//require("dotenv").config()


//info om API
const apiTest = process.env.API_KEY
const apiKey = 'NUMBERS_HERE'
const url = "https://favqs.com/api/";
const queryparam1 = "quotes/?filter=";
const queryparam2 = "&type=tag";

//selecting page element
const inputField = document.querySelector("#input");
const form = document.getElementById("form");

//ajax function
async function getSuggestions() {
  const wordQuery = inputField.value;
  const filterQueryParam = `${queryparam1}${wordQuery}${queryparam2}`;
  const endpoint = `${url}${filterQueryParam}`;
  try {
    const response = await fetch(endpoint, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Token token=${apiKey}`,
      },
    });
    if (response.ok) {
      const data = response.json();

      return data;
    }
  } catch (error) {
    console.log(error);
  }
}

function updateScreen() {
  //data is a random word, but it represents the return of  getSuggestions()
  getSuggestions().then((data) => {
    const arrayLengde = data.quotes.length;
    if (1 >= arrayLengde) {
      let poem = data.quotes[0].body;
      let poemAuthor = data.quotes[0].author;
      document.getElementById("author").innerHTML = poemAuthor;
      document.getElementById("responseField").innerHTML = poem;
    } else if (1 <= arrayLengde) {
      const randomIndex = Math.floor(Math.random() * arrayLengde);
      poem = data.quotes[randomIndex].body;
      poemAuthor = data.quotes[randomIndex].author;
      document.getElementById("author").innerHTML = poemAuthor;
      document.getElementById("responseField").innerHTML = poem;
    }
  });
}

form.addEventListener("submit", (e) => {
  e.preventDefault();
  updateScreen();
});

Answer 1

添加 .catch((err) => {}) 段落 v