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搭建:
.
暴露配置项
运行 npm run eject 暴露配置项(选择yes),此步骤不可逆,做好备份,有git建议先提交代码再进行此步骤!!!
暴露出 config / webpack.config.js 等,可用于配置less、postcss、跨域等设置。webpack低版本创建时,有webpack.config.js,项目结构不一样
.
第一种:node 方式
有些臃肿,每个指令指向不同js配置文件。将scripts中的文件复制一份,重命名demo.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 方式
以后再更新~~
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiajbai
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22