npm 包 webpack-dotenv-extended-plugin 使用教程

在前端开发中，我们使用 webpack 来进行模块化打包，而使用环境变量来控制不同环境（开发、测试、生产）的配置也是非常普遍的。但是每次手动处理环境变量的配置信息，无论是繁琐还是容易出错，都会影响我们的工作效率和开发质量。而 webpack-dotenv-extended-plugin 这个 npm 包，可以帮助我们自动加载环境变量，并且支持在不同环境中进行配置管理。

安装与配置

首先，我们需要安装 webpack-dotenv-extended-plugin：

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

安装完成后，在 webpack 的配置文件中使用该插件：

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

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

当无任何配置时，该插件会直接加载 .env 文件中的环境变量至 webpack 运行环境。同时，它还支持通过一个可选参数将环境变量加载至客户端代码中。示例如下：

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

此时，我们的 .env 文件就不再需要手动使用 dotenv 包来进行处理，webpack 可以直接使用其中的环境变量。同时，该插件的使用还包含如下的配置项：

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

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

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

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

当我们需要在不同环境下进行不同的配置时，可以通过上面的示例代码中的 defaults 和 env 配置项来实现，同时，该插件会自动合并不同环境的配置。还可以通过 systemvars 参数让这些环境变量在浏览器中使用 process.env 来访问。同时，它还支持在客户端代码中定义环境变量，例如在 Vue.js 项目中：

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

使用示例

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

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

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

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

在以下的代码中，我们可以使用 process.env.VUE_APP_API_BASE_URL 读取配置文件的值。

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

在开发模式下，该请求会发往 https://api-development.example.com/user/1；而在生产模式下，则是 https://api.example.com/user/1。

总结

通过使用 webpack-dotenv-extended-plugin 这个 npm 包，我们可以方便地管理和使用环境变量，并且支持在不同环境中进行配置管理。它的使用方式和配置也非常灵活，可以适用于各种不同的场景。这个插件的使用应该可以让我们的开发更加高效和便捷，值得我们一试。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671038dd3466f61ffdc5d

阅读全文

猜你喜欢

  • npm 包 websocket-connection-stream 使用教程

    WebSocket 是一种全双工协议，能够在浏览器和服务器之间创建持久性连接。websocket-connection-stream 是一个开源的 npm 包，提供了一种简单而有效的方法将 WebSo...

    4 年前
  • 使用 websocket-eval 进行前端实时代码执行

    什么是 websocket-eval websocket-eval 是一个可以在浏览器中运行、支持实时代码执行的 npm 包。利用它，我们可以通过 WebSocket 在浏览器中执行一段 JS 代码并...

    4 年前
  • npm 包 webschool-express 使用教程

    前言 webschool-express 是一个基于 Express.js 开发的 npm 包，致力于帮助开发者快速搭建 Node.js 服务器，并提供了一些常用的中间件和模块，可用于从零开始建造一个...

    4 年前
  • npm 包 webpack-node-test-runner 使用教程

    在前端开发中，我们经常需要进行单元测试或集成测试，而要进行这样的测试，就需要一定的工具来支持。webpack-node-test-runner 是一个基于 Webpack 和 Mocha 的测试运行器...

    4 年前
  • npm 包 webpack-node-utils 使用教程

    在前端开发中，使用 npm 包管理工具是一个很常见的操作。webpack-node-utils 是一个非常实用的 npm 包，可以帮助开发者更方便地在 Node.js 中使用 webpack。

    4 年前
  • npm 包 webpack-node-version 使用教程

    前言 无论是前端还是后端，我们都需要用到 Node.js 来运行代码。然而，在开发环境和生产环境中，Node.js 可能会有不同版本的问题，这给我们的开发工作带来了很大的困扰。

    4 年前
  • NPM包Webpack-notification使用教程

    前言 在前端开发中，我们常常会用到各种NPM包来帮助我们提高工作效率。其中，Webpack-notification是一个非常实用的包，它可以用来在Webpack构建过程中显示更加友好的提示信息。

    4 年前
  • npm 包 webpack-notifier-opensrcken 使用教程

    前言 在前端开发中，使用 webpack 打包工具可以极大地提高项目的性能和开发效率。但是，由于 webpack 打包工具的复杂性，开发者经常遇到各种错误和问题，如何快速定位和解决这些错误和问题是非常...

    4 年前
  • npm 包 websocket-handshake 使用教程

    前言 WebSocket 协议是一种 HTML5 的应用层协议，属于双向通讯的一种方式，相比于传统的 HTTP 协议，WebSocket 能够在客户端和服务器之间建立一条持久化的连接，实现实时通信。

    4 年前
  • npm 包 websocket-heartbeats 使用教程

    简介 websocket-heartbeats 是一个用于 WebSocket 心跳包管理的 npm 包，它可以让前端应用在 WebSocket 连接中自动发送心跳包，以维持连接的稳定性。

    4 年前
  • npm 包 websocket-json-stream 使用教程

    随着 Web 技术的不断发展，WebSocket 技术得到了广泛的应用和推广。WebSocket 可以使客户端和服务端之间实现实时通信，而且速度快、延迟低。在前端开发中，我们经常需要使用 WebSoc...

    4 年前
  • npm 包 webseeded-torrent-generator 使用教程

    在前端开发中，使用 npm 包来提供必要的功能是非常常见的做法。而今天我们要介绍的 npm 包是 webseeded-torrent-generator，它是一个非常实用的工具，可以用来创建支持 We...

    4 年前
  • npm包websdk使用教程

    介绍 npm包websdk是一款前端开发框架，在WebRTC技术的基础上，为前端开发者提供了一组易于使用的API，使得前端开发者可以快速实现音视频通话、多人会议等实时通信功能。

    4 年前
  • npm 包 webser 使用教程

    在前端开发中，经常需要在本地测试页面或应用，这时候我们通常会借助于本地服务器（比如 Apache 或 Nginx）来进行操作。但是，随着 npm 等包管理工具的逐渐流行，我们也可以使用一些专门为本地开...

    4 年前
  • npm 包 webpack-node-modules-list 使用教程

    在前端开发中，模块化开发是一个非常常见的开发方式。而在模块化开发中，webpack 是一个非常重要的工具。webpack 的 node_modules 目录下有很多模块，其中有一些模块可能会造成构建性...

    4 年前
  • npm 包 webpack-node-server-plugin 使用教程

    简介 在现代前端开发中，webpack 扮演着越来越重要的角色。webpack 能将多个文件打包成一个文件，加快页面加载速度，降低页面加载次数，在一定程度上提高了前端页面的性能。

    4 年前
  • npm 包 webpack-nsp-plugin 使用教程

    webpack-nsp-plugin 是一个用于将 Node Security Project (NSP) 安全警告嵌入到 Webpack 构建输出中的插件。本文将介绍 webpack-nsp-plu...

    4 年前
  • npm 包 webpack-numbers-demo 使用教程

    前言 Webpack 是一个开放源代码的 JavaScript 工具，它是一个模块打包工具。它的主要目的是将 JavaScript 文件打包成一个或多个文件，以提高网站性能和开发效率。

    4 年前
  • npm 包 webpack-object 使用教程

    简介 webpack-object 是一个基于 webpack 的插件，可以将 webpack 构建后的打包文件转化为一个 JavaScript 对象，以便于在代码中进行访问和处理。

    4 年前
  • npm 包 webpack-opener 使用教程

    在前端开发中，我们经常会使用 webpack 来构建和打包我们的项目。在开发过程中，我们需要频繁地启动本地服务器来预览和测试项目，但是每次手动打开浏览器并输入地址是有一定繁琐的。

    4 年前

相关推荐

    暂无文章