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.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
（2.2）package.json / scripts 内 新增命令：
"demo": "cross-env HTTP_ENV=demo node scripts/start.js"
（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 方式
搞不下去了，先酝酿 准备下班
