.env 文件中的 mapbox accessToken答案

【问题标题】：mapbox accessToken in .env file.env 文件中的 mapbox accessToken
【发布时间】：2020-09-18 22:49:27
【问题描述】：

我设置了一个新的 create-my-app 并将这个基本示例添加为 App 组件：

import {Component} from 'react';
import ReactMapGL from 'react-map-gl';

class App extends Component {

  state = {
    viewport: {
      width: 400,
      height: 400,
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 8
    }
  };

  render() {
    return (
      <ReactMapGL
        {...this.state.viewport}
        onViewportChange={(viewport) => this.setState({viewport})}
      />
    );
  }
}

运行时会报错，因为我还没有给出令牌。我读到我可以将它作为道具传递给 App。所以在索引文件中，我尝试了这个：

ReactDOM.render(
  <App mapboxApiAccessToken={"sjdd"} />,
  document.getElementById('root')
);

但它仍然给出同样的错误。如何使用 .env 文件添加 accessToken 以及我应该在其中写什么？

【问题讨论】：

在 react 应用程序中，没有字符串是秘密或私有的。确保您没有在此处添加任何秘密
如果不是秘密使用github.com/motdotla/dotenv

标签： javascript reactjs react-native environment-variables mapbox

【解决方案1】：

将 Mapbox 令牌公开为 Create React App 的环境变量：

在项目的根目录中创建一个名为 .env 的文件
定义环境变量来存储 Mapbox 令牌，例如REACT_APP_MAPBOX_TOKEN 注意：您必须创建以REACT_APP_（details）开头的自定义环境变量

创建后会在你的JS中暴露为process.env.REACT_APP_MAPBOX_TOKEN，例如：

<ReactMapGL
    mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
    {...this.state.viewport}
    onViewportChange={(viewport) => this.setState({ viewport })}
  />

【讨论】：