React自定义环境变量node、cross-env、webpack等方式不同环境配置命令整理

React自定义环境变量node、cross-env、webpack等方式不同环境配置命令整理

方案：

• 第一种：node 方式
• 第二种：cross-env 方式
• 第三种：webpack serve方式
• 第四种：webpack-dev-server 方式
• 第五种：umi 方式
• 第六种：env-cmd方式
• 第七种：dotenv方式创建项目
• 第八种：vite方式创建项目

.

React项目在不同开发、测试、预生产、生产、本地运行等情况，需要配置不同的命令。脚手架默认的配置项很多时候远远不够，注释修改不同代码来适配不同环境很繁琐。今天就整理下常用的几种配置方式：

注意：
npm run eject步骤不可逆，最好提前做好备份，有git的先提交代码后再操作。
package.json文件，不允许有注释。对象最后一个结尾不能有逗号
webpack：5.64.4，在v5以下的低版本创建的react项目结构不一样。原理差不多

React搭建：

搭建 react+js（或ts等），见我的另一个博客：
https://blog.csdn.net/weixin_44461275/article/details/121290058

.

暴露配置项

运行 npm run eject 暴露配置项（选择yes），此步骤不可逆，做好备份，有git建议先提交代码再进行此步骤！！！

暴露出 config / webpack.config.js 等，可用于配置less、postcss、跨域等设置。webpack低版本创建时，有webpack.config.js，项目结构不一样

.

第一种：node 方式

有些臃肿，每个指令指向不同js配置文件。将scripts中的文件复制一份，重命名demo.js

运行配置：建议复制 start.js （本文演示运行配置）
打包配置：建议复制 build.js

（1.1）package.json / scripts 内 新增命令：

"demo": "node scripts/demo.js"
1

（1.2）编辑 指令文件变量

我的案例是：scripts/demo.js

（1.3）配置环境变量 config / env.js 72行附近，见图

不是 新增变量的， 此步骤直接跳过。
由于案例中变量 HTTP_ENV 是新增的，则配置下，否则不输出。

（1.4）运行查看

process直接打印会报错，直接打印process.env就能看到了。process在配置文件和webpack文件打印能在 命令行输出看到，不方便

在各个页面组件，工具方法js、webpack配置文件等，都能直接获取到

好了，至于怎么用就看大家需求了。新增修改变量都可以的。唯一难受的是多环境要配置多个不方便。有兴趣的可以抽离下。

.

第二种：cross-env 方式

cross-env方式最常用，也很简便。我最喜欢用这个

（2.1）安装cross-env：任选一种

npm方式：
	npm install --save cross-env

cnpm方式：
	cnpm install --save cross-env

yarn方式：
	yarn add cross-env
1
2
3
4
5
6
7
8

（2.2）package.json / scripts 内 新增命令：

"demo": "cross-env HTTP_ENV=demo node scripts/start.js"
1

（2.3）配置环境变量 config / env.js 72行附近，见图

不是 新增变量的， 此步骤直接跳过。
由于案例中变量 HTTP_ENV 是新增的，则配置下，否则不输出。

（2.4）运行查看

process直接打印会报错，直接打印process.env就能看到了。process在配置文件和webpack文件打印能在 命令行输出看到，不方便

在各个页面组件，工具方法js、webpack配置文件等，都能直接获取到

此方法不需要搞新文件，但是要安装cross-env插件。多个环境配置时候，很方便，直接写在 命令里面就行了。

.

第三种：webpack serve方式

第四种：webpack-dev-server 方式

第五种：umi 方式

---

其他：

vue、react、uniapp配置全局域名、环境变量NODE_ENV、–mode区分开发环境和正式环境，点击查看 https://blog.csdn.net/weixin_44461275/article/details/122325488

不想写了，方式太多。以后再更新~~