不同打包工具下的环境变量配置方式对比

news/2024/2/24 7:18:28/文章来源:https://blog.csdn.net/qiwoo_weekly/article/details/135614765

本文作者为 360 奇舞团前端开发工程师 天明

前言

在现代的JavaScript应用程序开发中,环境变量的配置是至关重要的。不同的应用场景和部署环境可能需要不同的配置,例如开发、测试和生产环境。最常见的需求是根据不同的环境,配置如是否开启sourceMapAPI请求地址的切换、是否压缩代码等逻辑。本文主要介绍利用不同的工具:WebpackViteRollup打包项目的环境变量的配置方式。

process.env.NODE_ENV

process.env.NODE_ENV应该是我们最熟悉的环境变量了,我们知道在Node环境中process是一个全局变量,无需require引入。process.env属性返回一个包含用户环境信息的对象,当我们打印process.env时,发现它并没有NODE_ENV这一个属性。实际上process.env.NODE_ENV是在package.jsonscripts命令中注入的,可以通过以下方式进行设置:

{"scripts": {"dev": "NODE_ENV=development webpack --config webpack.dev.config.js","prod": "NODE_ENV=production webpack --config webpack.prod.config.js"}
}

当运行npm run devnpm run prod命令时,设置了NODE_ENV的不同值,项目中访问到的process.env.NODE_ENV值也会根据执行脚本的不同而分别取值:developmentproduction. 我们可以根据这个值的不同而分别进行不同的配置,这就是配置环境变量的基本逻辑.

Webpack项目环境变量配置方式
使用DefinePlugin插件

前面提到,在scripts命令中注入的NODE_ENV只能被Webpack的构建脚本访问,而被Webpack打包的源码中是无法访问到的,此时可以借助WebpackDefinePlugin插件,创建全局变量。

const webpack = require('webpack');module.exports = {//.....其他配置plugins: [new webpack.DefinePlugin({'process.env.API_URL': JSON.stringify('https://api.example.com'),'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),}),],
};

在上面的示例中,我们定义了两个环境变量:API_URLNODE_ENV,并且使用JSON.stringify将值转换为字符串。这样就可以在代码中使用process.env.API_URLprocess.env.NODE_ENV来访问这两个环境变量的值了。

Windows平台配置的注意点

Windows平台下直接设置NODE_ENV =XXX是会报错的, 解决办法也很简单,可以使用cross-env这个npm包来进行配置,cross-env能够提供一个设置环境变量的scripts,这样我们就能够以unix方式设置环境变量,然后在windows上也能够兼容

  • 安装

npm install cross-env --save
  • 使用

"scripts": {"dev": "cross-env NODE_ENV=development webpack","prod": "cross-env NODE_ENV=production webpack"
}

可以看到直接在NODE_ENV=XXX前面添加cross-env就可以了。

使用dotenv插件

假如我们项目的环境变量有很多,全部设置plugins中既不美观也不容易维护,此时将环境变量配置在.env文件中,然后使用dotenv插件来加载.env配置文件。

  • 安装

npm install dotenv-webpack --save-dev
  • 创建环境变量文件 在项目根目录下创建一个.env文件,如果有多种不同的环境,可以针对不同的环境创建不同的配置文件,例如可以使用.env.development.env.test.env.production在文件来分别表示:开发、测试、生产环境的环境变量。在文件中配置每个环境对应的变量:

// .env.development
API_URL=http://development.example.com
DEBUG=true
// .env.test
API_URL=http://test.example.com
DEBUG=true
// .env.production
API_URL=http://production.example.com
DEBUG=false
  • 加载.env配置 在webpack.config.js加载.env配置:

require('dotenv').config({ path: path.resolve(__dirname, '.env.' + process.env.NODE_ENV) })
  • 设置scriptsscripts命令中设置NODE_ENV

"scripts": {"dev": "cross-env NODE_ENV=development webpack","dev": "cross-env NODE_ENV=test webpack","prod": "cross-env NODE_ENV=production webpack"
}
Rollup项目环境变量配置方式

Rollup是一个现代化的JavaScript模块打包工具,专注于构建JavaScript库和组件。下面是Rollup中配置环境变量的几种常见方式:

使用rollup-plugin-replace

Rolluprollup-plugin-replace插件允许我们在打包过程中替换代码中的字符串。我们常用该插件来定义环境变量。

  • 安装:

npm install rollup-plugin-replace --save-dev
  • rollup.config.js中配置

const isProduction = process.env.NODE_ENV === 'production';
export default [{//.....其他配置plugins: [replace({'process.env.API_URL': JSON.stringify(isProduction ? 'https://prod.example.cn' : 'https://dev.example.cn')'process.env.NODE_ENV': JSON.stringify(isProduction? 'production' : 'development')})]}
]

在上面的例子中,我们首先获取到当前组件库的环境变量,并根据它的值设置不同的API_URLNODE_ENV.

之所以在组件库中使用rollup-plugin-replace 替换 process.env.NODE_ENV 的原因是为了在打包时,将代码中的环境变量替换为实际的值,以便在不同的环境中正确地运行组件库。这样就避免了宿主工程中的环境变量process.env.NODE_ENV,对组件库环境变量的影响。

Rollup使用dotenv插件

Webpack类似,在Rollup中使用dotenv插件进行环境变量的配置,可以按照以下步骤进行:

  • 安装dotenvrollup-plugin-replace

npm install dotenv rollup-plugin-replace --save-dev
  • 创建环境变量文件 与上面的Webpack创建环境变量文件类似,这里也可以创建多个环境配置文件.env.development.env.test.env.production

  • rollup.config.js加载.env配置

import { config } from 'dotenv'
config({ path: ".env."+ process.env.NODE_ENV }).parsed
export default {// ...plugins: [replace({process.env.API_URL: JSON.stringify(process.env.API_URL),process.env.DEBUG: JSON.stringify(process.env.DEBUG),}),// ...],
};

在上例中,我们首先通过dotenv.config()方法来加载.env文件中的环境变量。然后,使用@rollup/plugin-replace插件的replace方法,将环境变量注入到代码中。

  • package.json中设置scripts

"scripts": {"build:dev": "cross-env NODE_ENV=development rollup -c","build:prod": "cross-env NODE_ENV=production rollup -c","build:test": "cross-env NODE_ENV=test rollup -c","dev": "cross-env NODE_ENV=development rollup -c -w",}

执行对应的脚本命令后,在你的代码中,你可以通过process.env.XXX来访问已配置的环境变量.

Vite项目环境变量配置方式

与使用Webpack或是Rollup项目配置环境变量相比,Vite项目配置环境变量较为简单。

内建变量

Vite在一个特殊的import.meta.env对象上暴露环境变量

  • import.meta.env.MODE: 应用运行的模式。

  • import.meta.env.BASE_URL:部署应用时的基本 URL。他由base 配置项决定。

  • import.meta.env.PROD:应用是否运行在生产环境。

  • import.meta.env.DEV:应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。

  • import.meta.env.SSR:应用是否运行在 server 上。 这些变量可以直接在代码中访问

.env文件

同样在项目的根目录下,根据环境的不同创建不同的配置文件,不过文件的命名有些特殊性:

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载,但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载,但会被 git 忽略

加载的环境变量也会通过 import.meta.env 以字符串形式暴露给客户端源码。

注意:为了防止意外地将一些环境变量泄漏到客户端,只有以VITE_为前缀的变量才会暴露给经过vite处理的代码。

模式

默认情况下,开发服务器 dev命令 运行在 development模式,而build命令则运行在production模式。这意味着当执行vite build 时,它会自动加载.env.production中可能存在的环境变量.在某些情况下,若想在vite build时运行不同的模式,你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。

vite build --mode development

此时vite会使用.env.development文件下环境变量进行构建。

总结

通过对比发现虽然打包工具不同,但是配置环境变量的方式都大同小异,合理的使用环境变量,能够提高我们代码的灵活性、安全性、可维护性,并且将配置信息与代码分离是一种良好的开发实践,可以使应用程序更易于维护和管理。

参考:

https://cn.vitejs.dev/guide/env-and-mode.html

https://webpack.docschina.org/plugins/define-plugin/

https://cn.rollupjs.org/faqs/

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

0ce2e5fbfdeec724791bfedc63f98e92.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_925642.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

excel统计分析——Sidak、Bonferroni法多重比较

参考资料:生物统计学 Sidak法和Bonferroni法针对LSD法犯第Ⅰ类错误风险较大的问题进行了改进,通过根据平均数个数k,减小显著水平α的值来增大t值,从而增大差数显著显著性。 Sidak法的显著水平调整公式为: Bonferroni法…

多输入多输出 | Matlab实现基于LightGBM多输入多输出预测

多输入多输出 | Matlab实现基于LightGBM多输入多输出预测 目录 多输入多输出 | Matlab实现基于LightGBM多输入多输出预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab实现基于LightGBM多输入多输出预测(完整源码和数据) 1.data为数据集&a…

【目标检测实验系列】YOLOv5模型改进:融入坐标注意力机制CA,多维度关注数据特征,高效涨点!(内含源代码,超详细改进代码流程)

自我介绍:本人硕士期间全程放养,目前成果:一篇北大核心CSCD录用,两篇中科院三区已见刊,一篇中科院四区在投。如何找创新点,如何放养过程厚积薄发,如何写中英论文,找期刊等等。本人后续会以自己实战经验详细…

【2023 我的编程之旅】

前言 转眼 2024 年都过去 14 天了。回顾 2023 有太多技术上的思考以及人生的感悟,接下来趁着 CSDN 官方活动,顺便记录下来。 技术的价值 与现在的年轻人一心只想搞钱不同,刚毕业的时候,我的梦想是进入一家有实力的科技企业&…

机器学习---xgboost算法

1. xgboost算法原理 XGBoost(Extreme Gradient Boosting)全名叫极端梯度提升树,XGBoost是集成学习方法的王 牌,在Kaggle数据挖掘比赛中,大部分获胜者用了XGBoost。 XGBoost在绝大多数的回归和分类 问题上表现的十分…

STM32——ADC知识总结及多通道采样实验

1.ADC概念 ADC,全称:Analog-to-Digital Converter,指模拟/数字转换器 2 STM32各系列ADC的主要特性 3.F4框图 4.转换序列与转换时间 A/D转换被组织为两组:规则组(常规转换组)和注入组(注入…

【征服redis1】基础数据类型详解和应用案例

博客计划 ,我们从redis开始,主要是因为这一块内容的重要性不亚于数据库,但是很多人往往对redis的问题感到陌生,所以我们先来研究一下。 本篇,我们先看一下redis的基础数据类型详解和应用案例。 1.redis概述 以mysql为…

使用composer生成的DMG和PKG格式软件包有何区别

在使用Composer从包源构建软件包时候,有两种不同类型的包:PKG和DMG。你知道两者之间的区别吗? 以及如何选取吗? 每种格式都有各自的优势具体取决于软件包的预期用途以及用于部署软件包的工具。下面我们来了解一下PKG和DMG格式的区别和用途。…

科研绘图(八)线性热图

线性热图(Linear Heat Map)是一种数据可视化技术,用于展示数值在一维线性空间上的分布情况。它通常用于展示沿着一条线(例如时间线或任何一维序列)的数据密度或强度变化。线性热图与传统的二维热图不同,后者…

InternLM第5次课笔记

LMDeploy 大模型量化部署实践 1 大模型部署背景 2 LMDeploy简介 3 动手实践环节 https://github.com/InternLM/tutorial/blob/main/lmdeploy/lmdeploy.md 3

Spring Security-查询数据库认证

查询数据库认证权限(未自定义页面) 整合mybatis-plus 完成数据库操作 1.引入相关依赖 再父工程中 增加 mybatis-plus lombok mysql 相关依赖及版本号 <dependencyManagement><dependencies><dependency><groupId>org.springframework.boot</grou…

AIGC ChatGPT 4 Prompt 万能提示词公式

最近大家都在使用ChatGPT来帮助自己完成相应的工作。很多时候大家提出的问题得不到很清晰,很明确的答案。 我们应该怎么样来和ChatGPT进行有效的沟通呢? 例如我们先来问一问ChatGPT: 要获得最准确的回复,请确保遵循以下建议: 明确性:请尽量明确描述您的问题。确保提供足…

AI大模型预先学习笔记一:transformer和fine tune技术介绍

一、商业观点&#xff1a;企业借助大模型获得业务增长可能 二、底层原理&#xff1a;transformer 1&#xff09;备注 ①下面每个步骤都是自回归的过程&#xff08;aotu-regressive&#xff09;&#xff1a;已输出内容的每个字作为输入&#xff0c;一起生成下一个字 ②合起来就…

Android中的SPI实现

Android中的SPI实现 SPI是JVM世界中的标准API&#xff0c;但在Android应用程序中并不常用。然而&#xff0c;它可以非常有用地实现插件架构。让我们探讨一下如何在Android中利用SPI。 问题 在Android中&#xff0c;不同的提供者为推送功能提供服务&#xff0c;而在大型项目中…

使用micro-app将现有项目改造成微前端,对现有项目实现增量升级

使用micro-app将现有项目改造成微前端&#xff0c;对现有项目实现增量升级 基座应用 1、安装依赖 npm i micro-zoe/micro-app --save2、在入口引入 //main.js import microApp from micro-zoe/micro-appnew Vue({ }) //在new Vue 下面执行 microApp.start()3、新增一个vue页…

Nacos和Eureka比较、统一配置管理、Nacos热更新、多环境配置共享、Nacos集群搭建步骤

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Nacos和eureka的对比二、统一配置管理二、Nacos热更新方式一方式二 三、多环境配置共享四、Nacos集群搭建步骤&#xff08;黑马springCloud的p29&#xff0…

SpringCloud 源码系列之全局 Fegin 日志收集(okHttpClient、httpClient)

SpringCloud 源码系列之全局 Fegin 日志收集&#xff08;okHttpClient、httpClient&#xff09;目录 HttpClient 全局日志收集思路切换成HttpClient验证配置效果HttpClient 全局日志收集源码分析看源码顺带产物okHttpClient 全局日志收集总结 接上文SpringCloud OpenFegin 底层…

Python爬虫---scrapy shell 调试

Scrapy shell是Scrapy提供的一个交互式shell工具&#xff0c;它可以帮助我们进行爬虫的开发和调试。可以使用它来测试xpath或css表达式&#xff0c;查看它们是如何工作的&#xff0c;以及它们从你试图抓取的网页中提取的数据。它允许你在编写spider时交互地测试表达式&#xff…

【QT】自定义对话框及其调用

目录 1 对话框的不同调用方式 2 对话框QWDialogSize的创建和使用 3 对话框QWDialogHeaders的创建和使用 4 对话框QWDialogLocate的创建与使用 5 利用信号与槽实现交互操作 1 对话框的不同调用方式 在一个应用程序设计中&#xff0c;为了实现一些特定的功能&#xff0c;必须设计…

UI设计中插画赏析和产品色彩分析

插画赏析&#xff1a; 1. 插画是设计的原创性和艺术性的基础 无论是印刷品、品牌设计还是UI界面&#xff0c;更加风格化的插画能够将不同的风格和创意加入其中&#xff0c;在激烈的竞争中更容易因此脱颖而出。留下用户才有转化。 2. 插画是视觉触发器&#xff0c;瞬间传达大量…