首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在create-react-app中划分生产和开发版本

在create-react-app中划分生产和开发版本,可以通过以下步骤实现:

  1. 创建环境变量文件:在项目根目录下创建两个环境变量文件,分别是.env.production.env.development。这些文件将用于配置不同环境下的变量。
  2. 配置环境变量:在.env.production文件中,设置NODE_ENVproduction,在.env.development文件中,设置NODE_ENVdevelopment。这样可以在不同环境下加载不同的配置。
  3. 修改启动脚本:在package.json文件中,找到scripts字段下的startbuildtest命令,分别修改为以下内容:
    • "start": "react-scripts start" 修改为 "start": "cross-env NODE_ENV=development react-scripts start"
    • "build": "react-scripts build" 修改为 "build": "cross-env NODE_ENV=production react-scripts build"
    • "test": "react-scripts test" 修改为 "test": "cross-env NODE_ENV=development react-scripts test"
    • 这里使用了cross-env包来设置环境变量,确保在不同操作系统下都能正常工作。
  • 使用环境变量:在代码中可以使用process.env.NODE_ENV来获取当前环境变量的值。根据不同的环境,可以进行不同的配置,例如:
  • 使用环境变量:在代码中可以使用process.env.NODE_ENV来获取当前环境变量的值。根据不同的环境,可以进行不同的配置,例如:
  • 这样可以根据环境的不同,加载不同的配置文件或者执行不同的逻辑。

通过以上步骤,就可以在create-react-app中划分生产和开发版本。在开发过程中,使用开发环境配置,而在部署到生产环境时,使用生产环境配置,从而实现不同环境下的不同需求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue环境变量配置指南:如何在开发生产测试设置环境变量

前言Vue.js是一个流行的JavaScript框架,它提供了许多工具功能来帮助开发人员构建高效、可维护的Web应用程序。其中一个重要的工具是环境变量,它可以让你在不同的环境配置不同的参数选项。...在这篇博客,我们将介绍如何在Vue应用程序设置环境变量,以及如何在开发生产测试环境中使用它们。正文内容一、什么是环境变量环境变量是操作系统的一组动态值,它们可以影响应用程序的行为。...三、如何在开发环境中使用环境变量在开发环境,我们通常需要使用不同的API端点主机名。为了方便起见,Vue.js提供了一个默认的.env.development文件,可以在其中设置开发环境的变量。...四、如何在生产环境中使用环境变量在生产环境,我们通常需要使用不同的API端点主机名。为了方便起见,Vue.js提供了一个默认的.env.production文件,可以在其中设置生产环境的变量。...在本文中,我们介绍了如何在Vue应用程序设置环境变量,并演示了如何在开发生产、测试CI/CD环境中使用它们。我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!

74472

何在MySQL实现数据的时间戳版本控制?

在MySQL实现数据的时间戳版本控制,可以通过以下两种方法来实现:使用触发器使用存储过程。...MySQL支持触发器功能,可以在数据库的表上创建触发器,以便在特定的数据事件(插入、更新或删除)发生时自动执行相应的操作。因此,我们可以使用触发器来实现数据的时间戳版本控制。...1、创建表触发器 首先,创建需要进行版本控制的表,例如: CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name`...我们创建了一个名为users_insert的存储过程,它接受两个输入参数nameemail,并使用NOW()函数设置createdAtupdatedAt字段,以及初始版本号1。...在MySQL实现数据的时间戳版本控制,可以通过使用触发器存储过程两种方法来实现。无论采用哪种方法,都需要在设计数据模型业务逻辑时充分考虑时间戳版本控制的需求,并进行合理的设计实现。

8910

【原创】不想eject,还咋修改create-react-app的配置?

一、先抛问题 许多刚开始接触create-react-app框架的同学,不免都会有个疑问:如何在不执行eject操作的同时,修改create-react-app的配置。...create-react-app框架本身将webpack、babel的相关配置封装在了react-scripts, 执行yarn eject后,会将webpack、babel等配置暴露在config目录下...三、有需求咋解决 实际开发,我们还是需要更新webpack、babel的配置,比如: antd的按需加载; 配置css预处理器 - less; 设置alias、externals; 生产环境打包-去除...~ 我们划分几个步骤,来一一实现: 下载安装依赖 yarn add react-app-rewired customize-cra -D 胡哥现在使用的版本是 react-app-rewired@^2.1.8...@7.3.0,如果是最新的版本上面的react-app-rewiredcustomize-cra版本配合配置时有问题,所以使用了低版本的。

2.8K40

React 面试必知必会 Day8

何在 React 启用生产模式?...除此之外,如果你对代码进行最小化处理,例如 Uglify 的无效代码消除法,剥离出只用于开发的代码注释,这将极大地减少你的包的大小。 3. 什么是 CRA 以及它的好处?...# 安装 $ npm install -g create-react-app # 创建新项目 $ create-react-app todo-app $ cd todo-app # 构建、测试、运行...一个实时的开发服务器,对常见的错误发出警告。 一个构建脚本,用于捆绑 JS、CSS 图片,并提供哈希源码图。 4. 安装的生命周期方法的顺序是什么?...Hooks 是否取代了渲染 props 高阶组件? 渲染 props 高阶组件都只渲染一个 children,但在大多数情况下,Hooks 是一种更简单的方式,通过减少树的嵌套来达到这个目的。

2.4K40

闲聊vue版本差异开发不太容易注意的点(基础篇)

另外这篇文章的一个目的是将新版的vue版本的vue进行一个比较,将一些差异化很大的地方进行一个总结说明,将最基本的用法展示出来,这样对比着学习效率相对会比较高一些,所以下面有一些是关于注意项,还有一些是关于新版本的改动的内容...为什么一定要是一个函数 一既往的解释就没意义,直接看效果,首先data是一个函数的话,可以提供一个函数最基本的特性就是函数作用域,这样函数返回的一个对象都是一个全新的,这是重点,重点就是他的返回对象是一个全新的...,这里几个需要注意的点,因为我个人一直习惯使用的是2.0的版本,所以这里我没有很好的项目例子展示给你们,所以就简单的写一下关于setup比较容易忽略的几个知识点 this为什么不可以被使用 回答这个问题其实是...,所以这个时候我们的this是没办法指向他们的, 为什么一定要return出去 vue上一个版本,如果你想要使用一个data的变量,只需要在data中进行一个声明就可以了,但是这里还要进行return...setup函数里面,钩子函数是可以多次执行的,这里就不演示了,自己多写几遍就可以了 新版本的钩子函数,有一个回调函数作为参数,当执行的时候,回调函数会自动执行 vue3-props props这里设计的一个很奇怪的点

1.1K10

Webpack知识体系 - 笔记

而且在旧时代我们也的确是这样做的,比如: 但是,会有许多潜在问题: 依赖手工,比如有 50 个 JS 文件… 操作,过程繁 琐 当代码文件之间有依赖的时候,就得严格按依 赖顺序书写 开发生产环境一致...与旧时代 —— 在 HTML 文件维护 css 相比,这种方式会有什么优劣处? 有没有接触过 Less、Sass、Stylus 这一类 CSS 预编译框架?如何在 Webpack 接入这些工具?...,还有哪些配置可划分为 “流程类” 配置?...Loader 如何处理异步场景?...Loader、插件的使用方法,能够灵活搭建集成 Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 Webpack 环境 掌握常见脚手架工具的用法,例如:Vue-cli、create-react-app

1.5K20

React 入门手册

此后,人们用它开发了一些应用最广泛的 APP,并且它也使 Facebook Instagram 在无数应用占得领先地位。...React 最初是为了使开发者可以在任意时间点都能轻松地追踪 UI 及它的状态。它通过将 UI 划分为多个组件的集合来达到这个目的。...这点很不错,因为你的系统上永远不会有旧的版本,并且每次运行的时候,你都会获得最新、最全的可用版本。 让我们开始吧: npx create-react-app todolist ?...其他的前端框架( Angular Vue)有自己的特殊方法来在模板显示 JavaScript 值,或者执行类似循环的操作。 React 并没有添加类似的新特性。...学习如何使用条件渲染,如何在 JSX 中使用循环,如何使用 React 开发者工具 通过 plain CSS 或者 Styled Components 学习如何在 React 应用中使用 CSS。

6.4K10

带你了解一些package.json的骚操作

前言 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖项目的配置信息(名称、版本、许可证等元数据)。...安装项目依赖(dependencies & devDependencies) dependencies字段指定了项目运行所依赖的模块(生产环境使用), antd、 react、 moment等插件库:...npm install / yarn install 命令,就会在当前目录自动安装所需要的模块,安装完成项目所需的运行开发环境就配置好了。...指定项目 node 版本(engines) 有时候,新拉一个项目的时候,由于其他开发使用的 node 版本不同,导致会出现很多奇奇怪怪的问题(某些依赖安装报错、依赖安装完项目跑步起来等)。..."http://localhost:4000" // 配置你要请求的服务器地址 } 注意,当 create-react-app版本高于 2.0 版本的时候在 package.json 只能配置

1.8K40

常用的package.json,还有这么多你不知道的骚技巧

在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖项目的配置信息(名称、版本、许可证等元数据)。...version 字段 npm 包的模块版本都需要遵循 SemVer 规范,该规范的标准版本号采用 X.Y.Z 的格式,其中 X、Y Z 均为非负的整数,且禁止在数字前方补零: X 是主版本号(major...安装项目依赖(dependencies & devDependencies) dependencies字段指定了项目运行所依赖的模块(生产环境使用), antd、 react、 moment等插件库:...npm install / yarn install 命令,就会在当前目录自动安装所需要的模块,安装完成项目所需的运行开发环境就配置好了。...指定项目 node 版本(engines) 有时候,新拉一个项目的时候,由于其他开发使用的 node 版本不同,导致会出现很多奇奇怪怪的问题(某些依赖安装报错、依赖安装完项目跑步起来等)。

1.6K30

Next.js +Egg.js+React项目服务器部署超详解

3.2.2 安装Node环境 由于我们的博客项目都是基于node环境开发运行的,所以我们需要在linux服务器安装node。...3:切换当前node版本: nvm use 版本 nvm use v14.13.1 4:切换node默认版本: nvm alias default 版本 nvm alias default...所以在egg里的egg-mysql配置无论是在线上环境还是开发环境都还是配置成本地ip端口(一般为localhost:3306),然后在线上环境时我们会通过配合nginx配置来实现成功连接,请阅读下面...博客的后台管理项目是用create-react-app脚手架搭建的。由于它基于生产环境是打包生成静态资源文件,所以我们需要用到Nginx来配置它的服务器访问路径,后面再详细说明。...4.3.2 配置说明 即使上面各项目运行成功后,我们依然无法不知道如何在浏览器访问到对应的页面,这时候就需要Nginx大显身手了。

3.1K10

带你了解一些package.json的骚操作

前言 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖项目的配置信息(名称、版本、许可证等元数据)。...安装项目依赖(dependencies & devDependencies) dependencies字段指定了项目运行所依赖的模块(生产环境使用), antd、 react、 moment等插件库:...npm install / yarn install 命令,就会在当前目录自动安装所需要的模块,安装完成项目所需的运行开发环境就配置好了。...指定项目 node 版本(engines) 有时候,新拉一个项目的时候,由于其他开发使用的 node 版本不同,导致会出现很多奇奇怪怪的问题(某些依赖安装报错、依赖安装完项目跑步起来等)。..."http://localhost:4000"// 配置你要请求的服务器地址 } 注意,当 create-react-app版本高于 2.0 版本的时候在 package.json 只能配置 string

1.8K50

ViteConf 2022回顾:Vite是如何诞生的?

RequireJS 是在开发环境下及时加载转化模块的,可以通过编写插件来及时编译代码,它还支持通过打包命令来构建生产项目。...不过,RequireJS 所有的转化都在浏览器端进行,在进行打包时,一些生产环境不需要的代码在浏览器端也会被打进生产。...然而,这存在两个问题: 如何处理 npm 依赖; 如何在原生 ESM 中进行热更新。 由于他一直忙于 Vue 3 的开发工作,就没有持续跟进这两个问题。...Vite 0.1 直到一年后,突然想到了如何在原生 ESM 中进行热更新,然后就开始不断编码测试。...Vite 0.5 在 0.5 版本,为了更好的输出构建产物,尤雨溪决定继续在生产环境中使用 Rollup。Vite 成为了一个基于 Rollup 的热更新 dev server。

57720

定制 create-react-app:如何制作自己的模版

TL;DR: 有多种可用的工具能帮助开发者构建不同种类的网站应用。...可即便是应用了 CRA 这么棒的工具,开发者仍需要稍作调整,增加 CRA 不含的特别的脚本模块等。今天,我将教你如何为自己的团队创建自定义的 create-react-app 脚本。...许多开发者已经使用了 create-react-app 来构建他们的 React 应用,但像我之前提到的,开发者仍呼吁更多的配置选项。...解决的一个好办法是为你的团队发布一个 react-scripts 的 fork 库,然后所有团队开发者只需要运行 create-react-app my-app --scripts-version...='ENGR' 一旦用这个版本create-react-app 工具安装完了 react-scripts,用户就必须将 .env.example 文件重命名为 .env。

1.3K10

「React TS3 专题」从创建第一个 React TypeScript3 项目开始

npx create-react-app my-react-ts-app --typescript 注:请查看根目录下的的 package.json 文件确保React版本不低于16.7.0-alpha...true, port: 9000} }; 针对这个配置文件,让我们来逐步分解下: module.exports:声明 webpack 配置对象 mode:设置 webpack 当前为开发环境模式还是生产模式...11、创建启动构建脚本 11.1 、启动应用程序 接下来我们使用npm命令启动我们的应用程序,一个用于开发模式,一个用于生产打包模式,你可以修改 package.json scripts 属性对应的内容部分...11.3、在开发环境预览 接下来我们输入以下命令,在开发模式下进行预览: npm start 11.4、打开浏览器 接下来我们在浏览器里进行访问,在浏览器输入 http://localhost:9000...今天的内容就到这里,我们学习了如何使用 create-react-app 手工的两种方式创建 React TypeScript3项目。

2.2K10

本地开发环境以太坊合约交互实战

所有的操作都是在goland里面使用nodejs调web3库 •编写合约•编译合约(web3)-用solc编译(拿到bytecode、abi)•部署合约(web3)•找到合约实例•调用合约(set,get操作) 开发环境...//安装某宝的镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org //安装指定版本solc cnpm install...solc@0.4.24 //安装create-react-app npm install create-react-app -g //创建空的react项目 create-react-app project...//进入到project npm run start //安装web3 npm i web3 --save web3模块划分: •web3-eth:与blockchain合约相关的模块•web3...在开发测试环境下,Ganache提供了非常简便的以太坊私有网络搭建方法, 通过可视化界面可以直观地设置各种参数、浏览查看账户交易等数据 代码加注解 01-compile //导入solc编译器 var

98720

手把手教你接入前端热门抓包神器 - whistle

最近随着 Nohost 的开源,有不少同学问了 whistle 相关的问题,本篇文章将结合几个常见的业务场景介绍如何在本地前端项目开发中使用 whistle 。...一、使用webpack devServer的项目 项目准备 如今,大部分的前端项目是以 webpack 作为开发构建工具进行项目开发的。...我们将以这样一个最常见的场景,即以 webpack 开启本地 devServer 进行开发调试的方式,展示如何在这样的前端项目中结合使用 whistle 。...首先,假定有一个以 create-react-app 新建的,名为 my-app 的前端项目: create-react-app my-app cd my-app npm run start 会在浏览器开启一个...使用 localhost 进行本地开发,业务代码可能需要进行一些额外的逻辑判断,针对本地域名线上域名做行为区分等。

2K20
领券