React-js中的环境变量

Question

在我的项目中有一个环境变量

process.env.GOOGLE_MAPS_API

这是一个google api密钥，并使用它来渲染地图，并具有以下不起作用的代码：

export default GoogleApiWrapper({
  apiKey: (process.env.GOOGLE_MAPS_API)
})(MapContainer)

但是，当我直接使用api密钥时，它会渲染地图

export default GoogleApiWrapper({
      apiKey: ('AI************************')
 })(MapContainer)

在上面的代码中，如何使用google api密钥作为环境变量？

Answer 1

如果你正在使用Webpack来捆绑代码，这里有DefinePlugin示例代码-

// webpack.config.js
    new webpack.DefinePlugin({
  GOOGLE_MAPS_API: JSON.stringify(process.env.GOOGLE_MAPS_API)
})

app.js

console.log(GOOGLE_MAPS_API); // logs API_KEY