在 React 中隐藏 API 键
Hiding the API key in React
我们有一个使用 API 密钥（访问令牌）的应用程序。我们想在 .env 文件中隐藏 API 密钥。
我们已经完成了以下步骤。
在源文件夹中创建了一个 .env 文件（使用 .gitignore）
添加到.env
REACT_APP_ACCESSTOKEN = pk.ffe1Ijo.......
在终端中添加了 npm install dotenv
添加到我们的 map.component 文件中 -
从 'dotenv' 导入 dotenv
dotenv.config()
const accessToken = process.env.REACT_APP_ACCESSTOKEN;
添加到webpack.config.js-
外部：[“fs”]，
解决： {
扩展名：['.js', '.jsx', '.ts', '.tsx']
},
现在我们在 Web 浏览器控制台中收到 fs 未定义的错误消息。或者找不到访问令牌。
根据 create-react-app documentation，除非您正在创建玩具应用程序，否则在您的 React 应用程序中存储密钥不是一个好主意。
但是，如果你真的需要：
如果您使用的是 create-react-app，则无需安装单独的 dotenv 库，因为它开箱即用。
否则，dotenv-webpack 可能是您可以尝试的方法。请参阅其他 .
我们有一个使用 API 密钥（访问令牌）的应用程序。我们想在 .env 文件中隐藏 API 密钥。
我们已经完成了以下步骤。
在源文件夹中创建了一个 .env 文件（使用 .gitignore）
添加到.env REACT_APP_ACCESSTOKEN = pk.ffe1Ijo.......
在终端中添加了 npm install dotenv
添加到我们的 map.component 文件中 - 从 'dotenv' 导入 dotenv dotenv.config() const accessToken = process.env.REACT_APP_ACCESSTOKEN;
添加到webpack.config.js-
外部：[“fs”]， 解决： { 扩展名：['.js', '.jsx', '.ts', '.tsx'] },
现在我们在 Web 浏览器控制台中收到 fs 未定义的错误消息。或者找不到访问令牌。
根据 create-react-app documentation，除非您正在创建玩具应用程序，否则在您的 React 应用程序中存储密钥不是一个好主意。
但是，如果你真的需要：
如果您使用的是 create-react-app，则无需安装单独的 dotenv 库，因为它开箱即用。
否则，dotenv-webpack 可能是您可以尝试的方法。请参阅其他