首页
学习
活动
专区
工具
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腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!

1.7K72

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

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

16610
  • 【原创】不想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.9K40

    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.3K10

    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.9K40

    常用的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.2K10

    带你了解一些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。

    65820

    定制 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.4K10

    「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

    1K20

    如何解决React官方脚手架不支持Less的问题

    说在前面 create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Less...因为脚手架为了实现“零配置”,会默认把一些通用的脚本配置集成到 react-scripts,目的是让我们专注于src目录下的开发工作,不再操心环境配置。...同时,被其集成的脚本配置也会从程序目录消失 ,程序目录也会变得干净许多。 如果我们要自定义环境配置怎么办?...大概意思是,执行该命令后会把已构建依赖项、配置文件脚本复制到程序目录。该操作是不可逆转的,执行完成后会删除这个命令,也就是说只能执行一次。...# 生产环境配置 webpackDevServer.config.js # 开发服务器配置 我们需要关注的是前两个,最后一个是关于本地开发服务器http://localhost:3000的一些相关配置

    1.9K30
    领券