npm 包 12g-cleandotenv 使用教程

前言

前端开发中,经常需要在代码中存储敏感信息,例如数据库连接信息、API Key 等等。为了避免这些信息泄露,通常会使用环境变量来存储这些信息。而 .env 文件则是存储这些环境变量的文件。

然而,在代码库中提交 .env 文件会导致这些敏感信息暴露。因此,我们需要在每次提交代码前删除这些敏感信息。

12g-cleandotenv 是一个用于清除 .env 文件敏感信息的 npm 包,它的使用非常简单。

安装

你可以通过 npm 来安装 12g-cleandotenv 包:

--- ------- --------------- ----------

使用

我们可以在命令行中使用 cleandotenv 命令来清除 .env 文件敏感信息。

CLI

----------- ------- ---------

input

.env 文件的路径。

options

  • -e, --env <environment>: 设置要清除的环境变量的前缀,默认为 REACT_APP_,可以根据你的项目需要进行修改。

举个例子:

假设我们要清除项目中的 .env 文件,在项目目录中执行以下命令:

----------- ----

这个命令将会清除 .env 文件中所有以 REACT_APP_ 前缀开头的环境变量。你可以使用 -e--env 选项来改变环境变量的前缀。

示例

现在,让我们创建一个简单的 React 应用,并添加一个 .env 文件来储存 API Key。

首先,在项目根目录下创建一个 .env 文件,并将 API_KEY 公开:

------------------------------

然后,在我们的代码中使用这个环境变量:

------ ------ - --------- --------- - ---- --------

-------- ----- -
  ----- ------ -------- - ---------------

  ------------ -- -
    ----- --------- - ----- -- -- -
      ----- ------ - ----- -----------------------------------------------------------------------
      ----- ---- - ----- --------------
      --------------
    --
    ------------
  -- ----

  ------ -
    -----
      ----- - -
        ----
          -------------- -- -
            --- ------------------------------
          ---
        -----
      - - -
        -----------------
      --
    ------
  --
-

------ ------- ----

在提交代码前,我们需要使用 cleandotenv 命令来清除 .env 文件的敏感信息:

----------- ----

现在,我们就可以安全地提交代码到代码仓库中,而不必担心敏感信息泄露。

总结

12g-cleandotenv 是一个简单易用的 npm 包,可以帮助我们在提交代码前清除 .env 文件的敏感信息。通过这个工具,我们可以更加安全地管理和分享我们的代码。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055a4a81e8991b448d7ea3


猜你喜欢

  • npm 包 vi-angular2-select 使用教程

    npm 包 vi-angular2-select 是一个 Angular 2+ 的下拉选择框组件,提供了强大的过滤和自动完成功能。本文将为您详细介绍如何使用 vi-angular2-select,帮助...

    2 年前
  • npm 包 hacker-news-firebase 使用教程

    在前端开发中,我们经常需要与第三方数据源进行交互。其中,Hacker News 是一个非常受欢迎的技术社区,同时也是一个非常好的数据源。本文将介绍如何使用 npm 包 hacker-news-fire...

    2 年前
  • npm 包 resume-template 使用教程

    在前端开发中,我们常常需要为自己创建一份漂亮的简历以便于展示我们的能力和经验。而利用 npm 包 resume-template 可以帮助我们快速创建优秀的简历。 本文将深入讲解如何使用该 npm 包...

    2 年前
  • npm 包 vi-ng2-dnd 使用教程

    在前端开发中,拖拽功能是常常需要实现的一个特性。vi-ng2-dnd 是一个使用 Angular2 开发的拖拽组件库,可以帮助我们更方便地实现拖拽功能。 在这篇文章中,我们将介绍 vi-ng2-dnd...

    2 年前
  • npm包action-creators使用教程

    前言 随着前端技术的快速发展,越来越多的开发者需要处理大量的无序逻辑和状态。这时候,action-creators这个npm包就能够极大地简化开发流程,提高代码效率。

    2 年前
  • npm 包 done-inspect 使用教程

    前言 随着前端技术的不断发展,npm 包已经成为了前端开发的必备工具之一。而在 npm 包的众多工具中,done-inspect 是一款非常实用的工具。本文将重点介绍 done-inspect 的使用...

    2 年前
  • vue-multiple-dropdown

    A multiple dropdown vue component in mobile A multiple dropdown vue component in mobile This compone...

    2 年前
  • npm 包 create-webextension 使用教程

    在前端开发中,网页扩展程序是非常常见的构建方式。如何快速地创建一个 Web 扩展程序呢?npm 包 create-webextension 就可以帮你轻松实现。本篇文章将为大家介绍该 npm 包的使用...

    2 年前
  • npm 包 hanchor 使用教程

    在前端开发中,锚点是非常常见的一个功能,可以用来实现网页内跳转和平滑滚动等效果。但是,在使用锚点时,由于需要手动添加锚点以及对应的链接,非常容易出现链接与锚点不匹配的问题,这时候我们可以使用 npm ...

    2 年前
  • npm包@dk00/livescript使用教程

    简介 LiveScript 是一种高级的程序语言,类似于 CoffeeScript。它基于 JavaScript,但是更加简洁,更加易于读写。 本文主要介绍了 npm 包 @dk00/livescri...

    2 年前
  • npm 包 eth-alert 使用教程

    本文为前端开发者介绍一个 npm 包 eth-alert,它是一个基于 Web3.js 的以太坊区块链交易提示工具。eth-alert 可以在用户完成交易后自动显示交易状态和反馈结果,提高用户体验。

    2 年前
  • npm 包 fetch2files 使用教程

    前言 在 Web 开发中,我们经常需要从服务器上获取数据或者文件。fetch2files 就是一个基于 node-fetch 的 npm 包,它可以帮助我们使用 fetch 去下载文件或者一组文件,非...

    2 年前
  • npm 包 react-rte-es5 使用教程

    React-rte-es5 是一个针对 React 的富文本编辑器组件,它支持插入图片,附加样式和插入自定义组件等功能。本文将介绍如何使用 npm 包管理器安装和配置 react-rte-es5,以及...

    2 年前
  • npm 包 consul-conf 使用教程

    Consul 是一个用于服务发现、配置管理和分布式系统的开源工具。使用 Consul Conf npm 包,可以轻松管理和使用 Consul 中的配置。本文将详细介绍如何使用 consul-conf ...

    2 年前
  • npm 包 typescript-project 使用教程

    1. 什么是 typescript-project typescript-project 是一款基于 TypeScript 构建的 npm 包,它提供了一些基础的 TypeScript 配置文件,以及...

    2 年前
  • npm 包 @gutenye/apollo-upload-server 使用教程

    在现代 Web 应用中,文件上传已经成为了必不可少的一部分。如果使用 GraphQL 技术栈来开发应用的话,上传文件将会是一个更加引人注目的问题。好在社区中出现了一些非常不错的解决方案来支持文件上传,...

    2 年前
  • npm 包 node-ftps-promise 使用教程

    简介 Node.js 是一种基于 Chrome V8 引擎的 JavaScript 运行时,可用于构建快速、可扩展的网络应用程序。npm(Node Package Manager)是 Node.js ...

    2 年前
  • npm 包 supports-semigraphics 使用教程

    概述 npm 包 supports-semigraphics 是一个轻量级的前端工具,用于在终端/命令行界面上显示半角字符的文字图形。支持基本的几何图形和字符图案,并提供了一些自定义配置选项,以满足不...

    2 年前
  • npm 包 lodash.deeppick 使用教程

    在前端开发中,经常需要进行对象或数组的拷贝或筛选操作,而 lodash.deeppick 就是一个方便实用的 npm 包,可以帮助我们轻松完成这些操作。 安装 可以通过 npm 命令安装 lodash...

    2 年前
  • npm 包 async8 使用教程

    前言 在前端开发中,常常会遇到许多异步执行的场景,例如一些耗时的数据请求、文件读写、事件监听等。如果不处理好这些异步执行流程,很容易出现代码执行顺序混乱、数据获取不到、页面渲染异常等问题。

    2 年前

相关推荐

    暂无文章