在前端开发中，我们经常使用到 rollup 工具进行打包，而 rollup-plugin-inject-process-env 是一款非常有用的工具，可以将环境变量注入到我们的代码中。本文将为大家介绍 rollup-plugin-inject-process-env 的使用方法，并提供代码示例。
安装
使用 npm 安装 rollup-plugin-inject-process-env：
npm install -D rollup-plugin-inject-process-env
使用
添加 rollup.config.js 文件，导入 rollup-plugin-inject-process-env 并进行配置：
-- -------------------- ---- -------
------ ---------------- ---- -----------------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
------------------
--------- -------------
-------- -------------------------
--
-
--在上面的代码中，我们向 injectProcessEnv 传递了一个对象，对象的键即为环境变量的名称，对象的值则为环境变量的值。
我们可以在代码中这样使用环境变量：
const apiUrl = process.env.API_URL; console.log(apiUrl); // 'https://api.example.com'
示例代码
为了更好地理解 rollup-plugin-inject-process-env 的使用方法，我们提供一个基于 React 的示例代码。在这个示例中，我们将通过环境变量来判断是否开启 Redux DevTools 的扩展。
首先，创建一个 .env.development 文件：
REACT_APP_SHOW_REDUX_DEVTOOLS=true
然后，在我们的代码中使用 process.env.REACT_APP_SHOW_REDUX_DEVTOOLS 变量：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----------- ---- -------------
----- ----- - ------------------------ ----------------------------------------- -- ----------------------------------- -- ---------------------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--最后，配置 rollup 并启动开发服务器：
-- -------------------- ---- -------
------ ---------------- ---- -----------------------------------
------ ----- ---- ----------------------
------ ---------- ---- ---------------------------
------ ----- ---- -----------------------
------ -------- ---- --------------------------
------ ------- ---- ------------------------------
----- ------------- - -------------------- --- --------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
---------- -------------
--
-------- -
------- ------------- --------- ---
-----------
----------
------------------
------------------------------ -----------------------------------------
---
------------- -- ------- ------------ ------- ----- ---- ---
------------- -- ------------
-
--在上面的配置中，我们使用 injectProcessEnv 注入了一个环境变量，然后使用 isDevelopment 变量来判断是否是开发模式，如果是则启动开发服务器和实时重新加载插件。
总结
在本文中，我们介绍了 rollup-plugin-inject-process-env 的使用方法，并提供了代码示例。使用环境变量可以让我们的代码更加灵活，通过 rollup-plugin-inject-process-env 工具，我们可以轻松注入环境变量到我们的代码中，从而更好地适应不同环境的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa30b5cbfe1ea06103a9