【JS】【react】前端读取环境变量的骚操作

【JS】【react】前端读取环境变量的骚操作本站　　在经典的单页面应用中，以 react 为例，应用会区分开发环境和生产环境

　　在经典的单页面应用中，以 react 为例，应用会区分开发环境和生产环境。开发环境是用 webpack-dev-server 编译并启动的前端项目，本质上启动的是一个 node 服务。生产环境也是需要 node 编译为纯静态页面，等待后续部署。

　　使用 NODE_ENV 最多的地方是 webpack 配置文件，用来判断当前环境是开发还是生产，然后使用不同的编译配置打包项目。

　　上面说的开发环境和生产环境只是用来区分run start和run build。当项目 build 后生成静态文件准备部署时，我们还要区分是部署 staging 环境还是部署 release 环境。因为 staging 是正式部署生产前的测试阶段，所以这两个环境最大的区别就是接口的 baseURL 不同。

　　上面说了，开发和生产环境打包文件时都是基于 node，所以在process.env上设置就可以。

　　推荐使用 cross-env 这个库，它的好处就是跨平台，window，Linux 或 Mac 都是相同的设置方式。

　　但是要注意，也是后面我采坑的地方：这种环境变量的设置方式，只在编译的时候有效。本质上是在编译时根据 REACT_APP_ENV 判断出 baseURL 的值，然后写死在文件里。

　　也就是说，编译后，baseURL 的值已经是最终值，不会再执行 REACT_APP_ENV 的判断逻辑。

　　那么，有没有办法只 build 一次，打包一份文件，然后代码里直接读取系统环境变量，来判断使用哪个 baseURL 呢？

　　首先说说为什么会有这个需求。我司要做前端项目容器化，打包成 docker 镜像部署。期望的是只打包一份镜像，然后docker run的时候传一个环境变量，然后前端项目里读这个环境变量，判断出 baseURL 是什么。

　　开始我的思路就是 process.env，后来发现不对，因为前端 js 是不能直接读取系统信息的。最后我们选定了方案，使用 node。

　　前端不能读取环境变量，但是node可以。我们的思路是用 node 读取到环境变量，然后用服务端渲染的方式传给前端，前端再将这个值保存在 window 全局对象里后续使用。

　　决定花功夫做这件事情，那么有几个原则：绝对拒绝抄袭文章的智障行为，开这个专栏一方面记录自己的经验...

　　在经典的单页面应用中，以 react 为例，应用会区分开发环境和生产环境。开发环境是用 webpack-dev-server 编译并启动的前端项目，本质上启动的是一个 node 服务。生产环境也是需要 node 编译为纯静态页面，等待后续部署。

　　使用 NODE_ENV 最多的地方是 webpack 配置文件，用来判断当前环境是开发还是生产，然后使用不同的编译配置打包项目。

　　上面说的开发环境和生产环境只是用来区分run start和run build。当项目 build 后生成静态文件准备部署时，我们还要区分是部署 staging 环境还是部署 release 环境。因为 staging 是正式部署生产前的测试阶段，所以这两个环境最大的区别就是接口的 baseURL 不同。

　　上面说了，开发和生产环境打包文件时都是基于 node，所以在process.env上设置就可以。

　　推荐使用 cross-env 这个库，它的好处就是跨平台，window，Linux 或 Mac 都是相同的设置方式。

　　但是要注意，也是后面我采坑的地方：这种环境变量的设置方式，只在编译的时候有效。本质上是在编译时根据 REACT_APP_ENV 判断出 baseURL 的值，然后写死在文件里。

　　也就是说，编译后，baseURL 的值已经是最终值，不会再执行 REACT_APP_ENV 的判断逻辑。

　　那么，有没有办法只 build 一次，打包一份文件，然后代码里直接读取系统环境变量，来判断使用哪个 baseURL 呢？

　　首先说说为什么会有这个需求。我司要做前端项目容器化，打包成 docker 镜像部署。期望的是只打包一份镜像，然后docker run的时候传一个环境变量，然后前端项目里读这个环境变量，判断出 baseURL 是什么。

　　开始我的思路就是 process.env，后来发现不对，因为前端 js 是不能直接读取系统信息的。最后我们选定了方案，使用 node。

　　前端不能读取环境变量，但是node可以。我们的思路是用 node 读取到环境变量，然后用服务端渲染的方式传给前端，前端再将这个值保存在 window 全局对象里后续使用。

　　H5W3（），是一个专门分享IT技术知识、博文、问题回答的网站。大部分资料收集于互联网，如有侵权，可到馈，我们将在第一时间处理。