尝试在create-react-app中使用dotenv时，“未捕获的ReferenceError（进程未定义”）

花门楼前见秋草，岂能贫贱相看老。这篇文章主要讲述尝试在create-react-app中使用dotenv时，“未捕获的ReferenceError：进程未定义”相关的知识，希望能为你提供帮助。
在存储库https://github.com/khpeek/trailmaps中，我有一个使用react-google-maps创建的Google Map的示例，其中googleMapUrl prop包含我的Google Maps API密钥。根据12因素原则，我想将此API密钥移动到.env文件中并将其插入到URL中。
我正在尝试遵循dotenv模块（与create-react-app一起提供）的说明，并尝试了以下方法：

import React, { Component } from 'react'; import './App.css'; import MapWithGroundOverlay from './components/groundOverlay'; require('dotenv').config()class App extends Component { render() { return ( < div className="App"> < header className="App-header"> < h1 className="App-title"> Custom Overlay< /h1> < h1 className="App-title"> {`The API key is ${process.env.GOOGLE_MAPS_API_KEY}`}< /h1> < /header> < MapWithGroundOverlay googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBimnrhiugaGSNN8WnsjpzMNJcrH_T60GI& v=3.exp& libraries=geometry,drawing,places" loadingElement={< div style={{ height: `100%` }} /> } containerElement={< div style={{ height: `400px` }} /> } mapElement={< div style={{ height: `100%` }} /> } /> < /div> ); } }export default App;

在根目录中，我创建了一个.env文件，我在其中定义了GOOGLE_MAPS_API_KEY。但是，如果我npm start应用程序并去localhost:3000，我得到process未定义：

尝试在create-react-app中使用dotenv时，“未捕获的ReferenceError（进程未定义”）

文章图片

根据Uncaught ReferenceError: process is not defined，Node.js代码必须由Node进程运行，而不是浏览器; 据推测，这就是我做错了。但是，我发现这个答案有点高级，可以立即应用于此。很明显，dotenv应该可以与create-react-app一起使用，或者它不会与它捆绑在一起，但是我应该在这个例子中使用它吗？
答案Dotenv不适用于浏览器运行时。我建议添加库文档中概述的自定义环境变量。
https://github.com/khpeek/trailmaps#adding-custom-environment-variables
【尝试在create-react-app中使用dotenv时，“未捕获的ReferenceError（进程未定义”）】使用REACT_APP_对变量进行前缀应该可以正常工作。