为create-react-app项目搭建环境变量，适应不同环境需求

最新推荐文章于 2022-12-30 16:46:50 发布
最新推荐文章于 2022-12-30 16:46:50 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： webpack React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/janyxh/article/details/103677586
版权

一.对create-react-app 的默认配置进行自定义


1.选择安装 react-app-rewired
$ yarn add react-app-rewired customize-cra
2.修改package.json文件
/* package.json */
"scripts": {
   
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build"
最低0.47元/天 解锁文章
janyxh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
create-react-app环境变量配置 && vue-cli4
weixin_44892714的博客
10-16 641
create-react-app 主要：yarn add cross-env ，使用cross-env这个包 官方文档 https://create-react-app.dev/docs/adding-custom-environment-variables/ 其他： https://segmentfault.com/a/1190000022871495 vue-cli 官方文档 https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC
create-react-app的dev环境跨域请求代理转发-环境变量配置
07-28 1029
create-react-app 请求代理 请求转发 环境变量控制 根据不同环境区分变量
create-react-app : 自定义环境变量
缤纷冷泪的专栏
10-15 2442
create-react-app是一款非常好用的react项目脚手架，其创建的react项目除了可以访问默认的环境变量,还可以自定义环境变量，只要在项目目录下创建.env文件，然后直接写入环境变量就可以了。 具体如下： 1、创建.env文件 在react项目目录下创建.env文件。 2、写入环境变量，例如 ABCD=1 3、访问环境变量 对于默认定义好的环境变量，使用process.env.默...
create-react-app配置环境变量
博哥的二进制世界
10-14 1855
create-react-app配置环境变量安装cross-env配置package.json命令创建.env ，.env.development ，.env.production ，.env.uat ，.env.sit，项目中获取当前环境变量 安装cross-env npm i cross-env -D 配置package.json命令 "scripts": { "serve": "cross-env REACT_APP_ENV=development node scripts/start.j
create-react-app自定义设置
peade的博客
08-14 1658
当我们用create-react-app生成了react项目后，想要更改项目的端口号之类的，在网上查，有的会告诉你去修改node_modules里面的东西。我个人认为是去改node模块里的东西，是非常不合适的。 在设置端口号和请求代理，有推荐在package.json里改。 例如下面这样修改： "scripts": { "start": "set PORT=3090 &&a...
react-app-rewired添加全局变量
pgLi
06-16 390
背景 项目中需要获取到homepage字段，供动态加载js使用 方法 使用customize-cra中的addWebpackPlugin方法添加 // cofig-overrides.js addWebpackPlugin(new webpack.DefinePlugin({ "process.package.homepage": JSON.stringify(baseName) })), // 模块中使用 // @ts-ignore let baseName = process.package
详解使用create-react-app快速构建React开发环境
12-10
最近在折腾react开发，总结一个react环境搭建的教程，写得比较细碎，基本上就是自己的搭建步骤了，希望能够帮助到有需要的小伙伴。...create-react-app 自动创建的项目是基于 Webpack + ES6 。 执行以下命令创建项
create-react-app构建项目慢的解决方法
01-19
create-react-app慢的解决方法 在操作官方实例Create React App时,需要执行指令： create-react-app my-app 来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢,一直卡在 fetchMetadata: sill ...
npx create-react-app xxx创建项目报错的解决办法
11-21
手头有一台大学时代的Windows电脑，它此前没有装过create-react-app，只装了node环境。版本信息：node -> 10.16.3，npm -> 6.9.0。前几日闲的无事想给它装个React，结果失败了，报了错，所以有了下面这出。 安装过程...
create-react-redux-app：基于create-react-app的React样板
02-05
创建React Redux应用 该项目是通过。 该项目包括额外的redux软件包和改进的文件结构。...git clone git@github.com:YUzhva/create-react-redux-app.git NEW_PROJECT_NAME # with HTTPS git clone https://g
react-使用环境变量运行createreactapp
08-15
使用环境变量运行create-react-app
create-react-app-esbuild:在您的create-react-app中使用esbuild进行更快的编译，开发和测试
05-13
:rocket: create-react-app-esbuild :rocket: 在您的使用可以更快地进行编译，开发和测试。特征在开发过程中用esbuild替换babel-loader 用esbuild替换babel-loader以加快构建时间用esbuild替换terser，以加快构建...
React 配置文件(二) 配置环境变量
qqqqqqqq188的专栏
12-30 943
REACT配置环境变量
react-app-rewired 定义全局变量
weixin_34130389的博客
09-29 1412
通过react-app-rewired插件,react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置。
React 配置环境变量
qq_42578620的博客
12-28 1913
前端会有很多环境：本地开发，测试环境，正式上线环境等等，根据不同的环境我们用到的变量可能会根据环境的不同而需要不同的配置，如果手动修改很容易出错，工作量太大，这时候我们就需要配置环境变量，只需要根据不同的环境打不同的包即可。
creat react app 配置多开发环境
weixin_42289162的博客
09-23 664
使用 creat-react-app 创建项目 npx creat-react-app 项目名 开始配置 多环境 要使用到 react-app-rewired dotenv-cli yarn add react-app-rewired dotenv-cli 在根目录创建 .env.development 和 .env.production 两个文件` // .env.development REACT_APP_ENV=development // .env.production REACT_APP
html5支持中文变量名,怎么在react里定义变量
weixin_32419787的博客
06-17 472
怎么在react里定义变量JSX语法①直接声明：//可直接在变量名赋值html代码const element = Hello, world!;②使用表达式声明：//定义一个函数myMsgfunction myMsg(user){return '我叫' + user.name + '，我今年' + user.age + '岁';}//定义变量userconst user = {name: 'LJ'...
create-react-app环境配置
SeaBirds的博客
06-22 415
create-react-app环境配置 一、使用eject(npm run eject)暴露出webpack配置 该方法会直接在项目下生成配置文件，可以直接在配置文件中修改。 但该过程不可逆，不推荐该种用法 二、使用插件react-app-rewired react-app-rewired搭配插件customize-cra，在根目录下创建config-overrides.js文件可以覆盖默认配置； 因react-app-rewired从19年后就没有人维护，也不推荐这种方法 三、使用craco插件 安装
create-react-app修改配置多环境打包
songshu92的博客
08-14 7884
目录 修改配置 多环境配置 package.json demo如下： 测试 使用 参考资料，感谢以下同学： 修改配置 可以通过 npm runeject 命令将配置文件暴露出来，然后去修改里面的webpack配置 安装 react-app-rewired 包后，在根目录创建config-overrides.js 自定义配置，最后修改 package.jso...
create-react-app创建ts项目
最新发布
08-17
要使用create-react-app创建TypeScript项目，您可以按照以下步骤进行操作： 1. 首先，保您已经安装了Node.js和npm。您可以在终端或命令提示符中运行以下命令来验证安装是否成功： ``` node --version npm --version ``` 2. 接下来，全局安装create-react-app。在终端或命令提示符中运行以下命令： ``` npm install -g create-react-app ``` 3. 然后，使用create-react-app命令创建新的TypeScript项目。在终端或命令提示符中运行以下命令： ``` npx create-react-app my-app --template typescript ``` 这将创建一个名为"my-app"的新目录，并使用TypeScript模板初始化React项目。 4. 进入项目目录： ``` cd my-app ``` 5. 最后，您可以使用以下命令启动开发服务器： ``` npm start ``` 这将启动开发服务器，并在浏览器中打开项目。 现在，您已经成功使用create-react-app创建了一个TypeScript项目。您可以根据需要在新项目中进行开发和定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值