Javascript &引用；未捕获引用错误：未定义进程；试图在create react应用程序中使用dotenv

在存储库中，我有一个使用

react Google maps

创建的Google地图示例，其中

googleMapUrl

prop包含我的Google maps API键。根据12因素原则，我想将此API键移动到

.env

文件中，并将其插入URL

我正在尝试按照模块（与

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;

import React，{Component}来自'React'；
导入“/App.css”；
从“./components/groundOverlay”导入MapWithGroundOverlay；
require（'dotenv'）.config（）
类应用程序扩展组件{
render（）{
返回(
自定义覆盖
{`API键是${process.env.GOOGLE\u MAPS\u API\u key}`}
);
}
}
导出默认应用程序；

在根目录中，我创建了一个

.env

文件，在其中我定义了

GOOGLE\u MAPS\u API\u键。但是，如果我
npm启动应用程序
并转到
localhost:3000
，我会发现
进程
未定义：


根据，Node.js代码必须由节点进程运行，而不是由浏览器运行；想必，这就是我做错的地方。然而，我发现这个答案有点高，可以立即应用到这里。显然，
dotenv
应该可以与
create-react-app
一起使用，否则它不会与之捆绑在一起，但我应该在本例中使用它吗？
dotenv不适用于浏览器运行时。我建议添加库文档中概述的自定义环境变量


在变量前面加上
REACT\u APP
应该可以正常工作。
Dotenv不适用于浏览器运行时。我建议添加库文档中概述的自定义环境变量


在变量前面加上
REACT\u APP\u
应该可以正常工作