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

方案:

  • 第一种:node 方式
  • 第二种:cross-env 方式
  • 第三种:webpack serve方式
  • 第四种:webpack-dev-server 方式
  • 第五种:umi 方式

.

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

React自定义node、cross-env、webpack等方式不同环境配置命令整理_第1张图片
.

暴露配置项

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

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

React自定义node、cross-env、webpack等方式不同环境配置命令整理_第2张图片
.

第一种:node 方式

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

运行配置:建议复制 start.js (本文演示运行配置)
打包配置:建议复制 build.js

(1.1)package.json / scripts 内 新增命令

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

React自定义node、cross-env、webpack等方式不同环境配置命令整理_第3张图片
(1.2)编辑 指令文件变量

我的案例是:scripts/demo.js

React自定义node、cross-env、webpack等方式不同环境配置命令整理_第4张图片

(1.3)配置环境变量 config / env.js 72行附近,见图

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

React自定义node、cross-env、webpack等方式不同环境配置命令整理_第5张图片

(1.4)运行查看

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

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

React自定义node、cross-env、webpack等方式不同环境配置命令整理_第6张图片
React自定义node、cross-env、webpack等方式不同环境配置命令整理_第7张图片
好了,至于怎么用就看大家需求了。新增修改变量都可以的。唯一难受的是多环境要配置多个不方便。有兴趣的可以抽离下。

.

第二种: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"

React自定义node、cross-env、webpack等方式不同环境配置命令整理_第8张图片

(2.3)配置环境变量 config / env.js 72行附近,见图

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

React自定义node、cross-env、webpack等方式不同环境配置命令整理_第9张图片

(2.4)运行查看

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

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

React自定义node、cross-env、webpack等方式不同环境配置命令整理_第10张图片
React自定义node、cross-env、webpack等方式不同环境配置命令整理_第11张图片
此方法不需要搞新文件,但是要安装cross-env插件。多个环境配置时候,很方便,直接写在 命令里面就行了。

.

第三种:webpack serve方式

第四种:webpack-dev-server 方式

第五种:umi 方式


以后再更新~~

你可能感兴趣的:(react技术栈及全家桶,webpack,react.js,javascript)