素材巴巴 > 程序开发 >

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

程序开发 2023-09-03 12:42:59

方案:

.

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-envcnpm方式:cnpm install --save cross-envyarn方式: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 方式


以后再更新~~


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。