javascript - 如何在Codesandbox在线编辑器中使用dotenv

Question

尝试使用需要隐藏的 API key 。

这是一个纯javascript代码，使用https请求的fetch API从api获取数据。使用在线编辑器代码沙盒。

出于演示目的。想要隐藏 API key

使用dotenv包 [ https://www.npmjs.com/package/dotenv] .如何在Codesandbox中使用dotenv

或者有任何其他方法可以使用纯javascript代码以及 API 调用来隐藏 Codesanbox 中的 Api key 以显示数据。

Answer 1

在项目根目录中创建一个.env，并在index.js文件中创建一个require('dotenv')。

import "./styles.css";
require("dotenv").config();

document.getElementById("app").innerHTML = `
<h1>Hello Vanilla!</h1>
<div>
  We use Parcel to bundle this sandbox, you can find more info about Parcel
  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
</div>
<div>
  ${JSON.stringify(process.env, null, 2)}
</div>
`;

console.log("env", process.env);  

看看这个沙箱:https://codesandbox.io/s/jolly-wave-mz3y1