React项目中无需dotenv访问.env文件端口号的方法

不用dotenv的话，直接利用Create React App的内置规则就能解决：

• 原因：Create React App默认只会把以REACT_APP_开头的环境变量注入到前端代码中，你定义的PORT是给开发服务器用的配置变量，不会被暴露给客户端的JS代码，所以在App.tsx里拿不到。
• 解决步骤：
  1. 修改根目录的.env文件，把变量名改成REACT_APP_PORT = 30001
  2. 在App.tsx里改成const PORT_NUMBER = process.env.REACT_APP_PORT;
  3. 重启你的开发服务器（重新执行yarn start），因为.env文件的修改需要重启才能生效

另外补充：如果你不想加REACT_APP_前缀，就得手动修改webpack配置来暴露变量，但这种方式步骤繁琐，远不如加前缀来得直接。

内容的提问来源于stack exchange，提问作者Nawaraj Jaishi