首页 > 编程语言 >create-react-app 除了NODE_ENV如何区分环境变量

create-react-app 除了NODE_ENV如何区分环境变量

时间:2023-06-25 09:44:05浏览次数:40  
标签:NODE ENV process create cross react env STAGE

比如webpack打包的时候,可能要打包到测试环境或者生产环境,但是这时候NODE_ENV的值都是production ,这个时候如何区分呢。
答案是:

cross-env和webpack.DefinePlugin


1. 定义环境变量到编译环境:

  • 测试环境: cross-env NODE_STAGE=test npm run build
  • 预上线: cross-env NODE_STAGE=stage npm run build
  • 线上环境: cross-env NODE_STAGE=prod npm run build

2. 通过环境变量为运行环境定义全局常量:

plugins: [
  new webpack.DefinePlugin({
    "process.env.NODE_ENV": process.env.NODE_ENV,
    "process.env.NODE_STAGE": process.env.NODE_STAGE,
  })
]

2. 使用全局常量

const nodeStage = process.env.NODE_STAGE;
console.log(nodeStage)


标签:NODE,ENV,process,create,cross,react,env,STAGE
From: https://www.cnblogs.com/lvhw/p/17502158.html

相关文章

  • 百度Amis+React低代码实践
    背景在项目中有集成低代码平台的想法,经过多方对比最后选择了amis,主要是需要通过amis进行页面配置,导出json供移动端和PC端进行渲染,所以接下来讲一下近两周研究amis的新的以及一些简单经验,供大家参考.什么是amisamis是一个低代码前端框架,它使用JSON配置来生成......
  • React - 10 react中的合成事件
    1.react中的合成事件推荐使用箭头函数,不用管this,但是如果要传参,还得通过bind,事件对象永远是最后一个参数importReactfrom"react";classDemoextendsReact.Component{/*基于React内部的处理,如果我们给合成事件绑定一个“普通函数”,当事件行为触发,绑定的函数执行;......
  • Elasticsearch专题精讲—— REST APIs —— Cluster APIs —— Node specification
     RESTAPIs——ClusterAPIs—— Nodespecification(节点过滤)https://www.elastic.co/guide/en/elasticsearch/reference/8.8/cluster.html#cluster-nodes Somecluster-levelAPIsmayoperateonasubsetofthenodeswhichcanbespecifiedw......
  • node-sass安装问题
    工作中用的vue2搭建前台,写sass样式时遇到问题:node-sass找不到,网上的大多数内容都是让你用淘宝cnpm下载node-sass和sass-loader,但还是存在项目报错的情况,这里是我踩坑的记录,希望能提供些帮助。查看npm源:npmconfiggetregistry,是淘宝源则不用替换1.1设置npm的源(设置成淘宝的......
  • Nodejs介绍与安装
    Nodejs介绍与安装介绍Nodejs是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境Nodejs采用Google开发的V8引擎运行js代码,使用事件驱动、非阻塞和异步I/O模型等技术来提高性能,可优化应用程序的传输量和规模Nodejs大部分基本模块都用JavaScript编写。......
  • k8s驱逐篇(6)-kube-controller-manager驱逐-NodeLifecycleController源码分析
    概述k8sv1.16版本中NodeController已经分为了NodeIpamController与NodeLifecycleController,本文主要介绍NodeLifecycleController。NodeLifecycleController主要功能有:(1)定期检查node的心跳上报,某个node间隔一定时间都没有心跳上报时,更新node的readycondition值为false或unkno......
  • Reactor 模式与Tomcat中的Reactor
    系列文章目录和关于我参考:[nio.pdf(oswego.edu)](https://gee.cs.oswego.edu/dl/cpjslides/nio.pdf)一丶什么是ReactorThereactordesignpatternisaneventhandlingpatternforhandlingservicerequestsdeliveredconcurrentlytoaservicehandlerbyoneormore......
  • Ubuntu提示【Authentication is required to create a color profile/managed device
    1.安装vimaptinstallvim-y2.修改文件 vim/etc/polkit-1/localauthority/50-local.d/45-allow-colord.pkla3.粘贴以下内容[AllowColordallUsers]Identity=unix-user:*Action=org.freedesktop.color-manager.create-device;org.freedesktop.color-manager.create-......
  • create build make generate 的区别
    在英语中,create、build、make、generate都可以表示“创造”或“制造”的意思,但它们的用法略有不同。其中,create与make的语意范围有相当的重叠,两者都可用来表示“从无到有”的“创造”或“制造”,但create更强调创造出新事物的过程,而make更强调制造出实用的东西。build则更......
  • python: How to Create a Python Package
    上篇博文的两个类文件,拖着一个创建好的包名Model中,有些代码会自己生成变化"""StudentScoreInfo.py学生成绩类date2023-06-16edit:GeovinDu,geovindu,涂聚文ide:PyCharm2023.1python11"""importdatetimeimportsysimportosclassStudentScore(object):......