前言
在 Web 开发过程中，常常需要在不同环境下使用不同的变量。例如，开发环境和生产环境下使用的域名和 API 地址不同。而使用环境变量可以做到同一份代码在不同的环境下执行不同的逻辑。但是，手动管理变量会极其麻烦。此时， @shopify/with-env 这个 npm 包就能帮助我们轻松解决这个问题。
什么是 @shopify/with-env
@shopify/with-env 是 Shopify 公司提供的一个工具，可以帮助开发者在不同的环境中管理应用的变量。通过该工具，我们可以在环境中设置变量，然后在应用的代码中使用这些变量，而无需在代码中直接硬编码。这样我们可以在不同的环境中使用相同的代码，而无需更改代码本身。
安装
如果我们的项目是通过 npm 或 yarn 管理的，那么安装 @shopify/with-env 只需一行命令：
npm install @shopify/with-env
或者：
yarn add @shopify/with-env
使用
1. 环境变量的设置
在使用 @shopify/with-env 的过程中，我们需要设置几个环境变量。这些环境变量包括：
NODE_ENV：环境名称，通常为 "production" 或 "development"。REACT_APP_*：需要在应用中使用的变量。在变量名前加上REACT_APP_前缀，这些变量就不会被create-react-app所忽略。
我们可以在环境变量文件 .env（.env.production, .env.development 等）中设置这些变量。例如，development 环境下我们可能需要以下变量：
NODE_ENV=development REACT_APP_API_URL=http://localhost:3000
然后，我们在应用的代码中就可以使用这些变量了。
2. 使用 withEnv 功能
在使用 @shopify/with-env 的时候，我们首先需要使用 withEnv 函数包装应用的主要组件，在包装完成之后导出。以下是一个具体的示例：
-- -------------------- ---- -------
------ - ------- - ---- --------------------
-------- ------------ -
----- - --- - - ------
----- ------ - ----------------------
------ -
-----
---------- -----------
------ --- --- --- ------------
------
--
-
------ ------- ---------------在这个示例中，我们首先使用 withEnv 包装了 MyApp 组件，然后在 MyApp 组件中使用 props.env 来访问环境变量。在这里，我们使用了之前设置好的 REACT_APP_API_URL 变量。
总结
通过 @shopify/with-env 这个工具，我们可以轻松管理应用程序中的环境变量。这个工具适用于 React（create-react-app）应用中，但可以轻松适配到其他框架和应用中。我们只需要通过简单的几步就能轻松使用此工具，它将帮助我们大大简化开发过程中的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedada6b5cbfe1ea0610cdf