在实际开发中,例如:有时候打包发布时,需要手动更新版本,比如修改package.json中的version,但是如果有时候忘了修改,那么又得build一次;

如果能动态设置多好,webpack下可以在配置文件中运行一段node.js代码处理这种情况。

如果我们用脚手架搭建的并且没有eject, 如何执行一段node.js代码并把执行的代码设置到环境变量中呢?(react-scripts情况下

我们看到react-scripts文档中有这一段,截图如下

但是这个是需要手动创建一个.env的文件,手动修改.env文件, 如果想满足我们动态设置环境变量,好像是不行的。因为每次都要修改.env里面的内容,这和修改package.json没有区别了。

怎么解决呢?

既然官方文档已经帮我们提供了读取文件设置环境变量的方法。那我们为什么不实现一个动态创建一个.env的文件,并且在这文件中写入想要的环境变量呢。

想到了一个方法,那么就看看怎么实现了:

(1)怎么创建.env文件呢

新建一个env.config.js文件,并在该文件中写下这段代码:

const fs = require('fs');

/**
* 根据 当前时间组装版本号,”年月日时“的形式
* @returns {string}
*/
function getCurrentVersion() {
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
return `${year}${getCompleteVal(month)}${getCompleteVal(day)}${getCompleteVal(hour)}`;
} /**
* 补全小于10的数字,例如: 9 =》 09
* @param val
* @returns {string}
*/
function getCompleteVal(val) {
return val < 10 ? `0${val}` : val;
}
const version = getCurrentVersion(); // 写入.env.version文件,提供给env-cmd处理
fs.writeFile('./.env.version', 'REACT_APP_VERSION=' + version + '', function(err) {
if (err) {
throw err;
}
console.log('Generated version number:', version);
require('env-cmd').EnvCmd(process.argv.slice(2));
});

这里最重要的代码是最后一行,就是执行env.cmd提供的EnvCmd方法。

(2)命令怎么写呢?

在package.json的script中写法如下:

"scripts": {
"build": "node env.config.js .env.version react-scripts build",
"build:dev": "set REACT_APP_ENV=dev& npm run build",
"build:test": "set REACT_APP_ENV=test& npm run build","build:prod": "set REACT_APP_ENV=prod& npm run build"
}

当执行npm run build:dev或者npm run build:test 或者npm run build:prod时,会自动写入.env.version, 并通过env-cmd解析生成的文件。

(3)怎么使用动态设置的环境变量?

使用方式没有区别,使用如下:

console.log(process.env.REACT_APP_VERSION);

此时打印的结果大概如下:2019021918

这样每次我都不需要手动设置版本号了,每次build,会自动生成一个(最后结尾是小时,因为一般不会一个小时内build一次,如果有,你可以根据自己的实际情况设置

谢谢大家!

脚手架(create-react-app)没有eject情况下,使用react-scripts的时候,动态设置环境变量的更多相关文章

  1. mac下安装好jdk和jmeter后设置环境变量

    1. 执行vim ~/.bash_profile,打开文件: 2. 按i,进入输入状态,并输入如下信息,其中为jdk安装路径: export JAVA_HOME=/Library/Java/JavaV ...

  2. 在Ubuntu下设置环境变量

    在Ubuntu中有如下几个文件可以设置环境变量 /etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行. /e ...

  3. ubuntu下设置环境变量的三种方法【转】

    转自:http://blog.chinaunix.net/uid-26916352-id-3208366.html 通常设置环境变量有三种方法: 一.临时设置 export PATH=/home/ya ...

  4. JAVA设置环境变量和在DOS下运行java程序

    在学校实训的这几天,老师带着我们开始深入的复习java.这是第一天的内容哦 对于“JAVA设置环境变量和在DOS下运行java程序”,许多初学者是陌生的,但了解这个却对后期的学习很重要. http:/ ...

  5. 【环境变量】Linux 下三种方式设置环境变量

    1.在Windows 系统下,很多软件安装都需要配置环境变量,比如 安装 jdk ,如果不配置环境变量,在非软件安装的目录下运行javac 命令,将会报告找不到文件,类似的错误. 2.那么什么是环境变 ...

  6. Linux 下三种方式设置环境变量

    1.在Windows 系统下,很多软件安装都需要配置环境变量,比如 安装 jdk ,如果不配置环境变量,在非软件安装的目录下运行javac 命令,将会报告找不到文件,类似的错误. 2.那么什么是环境变 ...

  7. Linux和Windows下查看、设置环境变量的比较

    [一]查看环境变量: 1.windows 查看所有的变量:set    范例:>set    查看某个变量的值:set 环境变量名    范例:     >set JAVA_HOME    ...

  8. Powershell下设置环境变量

    NODE中经常会用到process.env.NODE_ENV来判断当前环境,因为使用的系统是windows,在sublime text下安装terminal插件后,默认启动的时Powershell, ...

  9. 在Windows下设置环境变量 运行mysql程序变得更容易

    在Windows下设置环境变量,点开始菜单,右键单击我的电脑--属性--高级--环境变量 可以看到PATH的变量是这样的: C:\WINDOWS;C:\WINDOWS\COMMAND   为了让运行m ...

随机推荐

  1. 运行spark官方的graphx 示例 ComprehensiveExample.scala报错解决

    运行spark官方的graphx 示例 ComprehensiveExample.scala报错解决 在Idea中,直接运行ComprehensiveExample.scala,报需要指定master ...

  2. 爬虫浅谈一:一个简单c#爬虫程序

    这篇文章只是简单展示一个基于HTTP请求如何抓取数据的文章,如觉得简单的朋友,后续我们再慢慢深入研究探讨. 图1: 如图1,我们工作过程中,无论平台网站还是企业官网,总少不了新闻展示.如某天产品经理跟 ...

  3. PowerDesigner 生成C#实体模版代码

    操作步骤见:  https://blog.csdn.net/da454122373/article/details/54346217 最后的template 模版代码如下: .if (%isValid ...

  4. Day5 作业(完成)

    1,有如下变量(tu是个元祖),请实现要求的功能# tu = ("alex", [11, 22, {"k1": 'v1', "k2": [& ...

  5. 程序媛计划——python中级课时1

    class1 异常处理 #python会把标准输入的内容当作字符串处理,即使输入的是数字3也会转化为字符串’3’. n1 = raw_input() n2 = raw_input() print n1 ...

  6. 深度优先搜索 - 简单demo

    输入一个数n,输出 1 ~ n 的全排列,例如输入 3,全排列则为:123,132,213,231,312,321 一共六种. 这里采用深度优先搜索来解决这个问题: #include<stdio ...

  7. if判断和switch case 和三元运算符整理

    if判断和switch case 和三元运算符整理 例子1:if判断写法: <script type="text/javascript"> var num = 12; ...

  8. 使用hex编码绕过主机卫士IIS版本继续注入

    本文作者:非主流 测试文件的源码如下: 我们先直接加上单引号试试: http://192.168.0.20/conn.asp?id=1%27 很好,没有报错.那我们继续,and 1=1 和and 1= ...

  9. java验证身份证合理性

    package com.tiantian.util; import java.util.Calendar;import java.util.HashMap;import java.util.Map;i ...

  10. 【pkuwc2018】 【loj2537】 Minmax DP+线段树合并

    今年年初的时候参加了PKUWC,结果当时这一题想了快$2h$都没有想出来.... 哇我太菜啦.... 昨天突然去搜了下哪里有题,发现$loj$上有于是就去做了下. 结果第一题我5分钟就把所有细节都想好 ...