在前端开发中，我们经常需要根据环境变量来判断当前应用的运行环境。但是，如何在页面上或者浏览器标签页中展示当前环境的标识呢？npm包 envicon 可以帮助我们快速实现这个功能。
简介
envicon 是一款用于在页面上或者浏览器标签页中展示环境标识的简单工具。它支持多种展示方式，例如图标、文字、背景色等。使用 envicon 可以提高我们开发和生产环境的识别效率，同时帮助我们快速找到当前环境。
安装
要使用 envicon，我们首先需要在项目中引入它。可以使用以下命令进行安装：
--- ------- ------ -------
使用方法
在安装好 envicon 后，我们可以在项目中引入这个工具并使用它。
在页面中展示环境标识
在页面中展示环境标识，可以使用 envicon 的 createElement 方法来创建一个 DOM 元素，并添加到页面中。例如，我们可以创建一个 div 元素，并将其加到页面的 header 中：
------ - ------------- - ---- ----------
---------------------------------------------
---------------
----- -------
----- ------
------ -
------ -------
-
--
--上面的代码中，我们创建了一个展示环境标识的 div 元素，并将其添加到了 header 中。这个 div 元素展示了当前环境为开发(dev)环境。其中：
type: 元素类型，可以是'text'、'icon'或者'background'text: 元素文本，只有type为'text'时会生效style: 元素样式
我们可以根据自己的需求更改这些参数，例如改变 type 为 'icon'，就可以展示一个图标作为环境标识。同时，我们也可以自定义样式，例如改变 style.color，就可以改变文本颜色。
在浏览器标签页中展示环境标识
在浏览器标签页中展示环境标识，可以使用 envicon 的 setFavicon 方法来修改页面的 favicon。例如，我们可以创建一个展示环境标识的 icon，然后将其设置为页面的 favicon：
------ - ---------- - ---- ---------- ----------------------------------------------------
上面的代码中，我们根据当前环境的变量 process.env.NODE_ENV 来加载对应的 icon，并将其设置为页面的 favicon。
在 Webpack 中使用
在使用 Webpack 时，我们可以使用 envicon-webpack-plugin 插件来自动生成不同环境的 favicon 和标识。
首先，我们需要安装 envicon-webpack-plugin：
--- ------- ---------- ----------------------
然后，我们通过以下配置来生成不同环境的 favicon 和标识：
----- -------------------- - ----------------------------------
-------------- - -
-------- -
--- ----------------------
---- -
----- -------
----- ------
------ -
------ --------
--
--
----- -
----- -------------
---------------- ----------
------ -
------ --------
--
--
---
--
--上面的代码中，我们在 plugins 中使用 envicon-webpack-plugin 插件，并配置了两个环境，dev 和 prod。envicon-webpack-plugin 会根据这些配置来生成不同环境的 favicon 和标识。例如，当我们在开发环境下运行应用时，会显示一个带有 'dev' 文字的标识，当我们在生产环境下运行应用时，会显示一个黑色背景标识。
总结
通过 envicon，我们可以快速地为我们的应用添加环境标识，方便我们对应用的开发和生产环境进行识别和管理。同时，envicon-webpack-plugin 插件可以帮助我们更高效地生成环境标识，提升开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e26a563576b7b1ecf6d