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

有没有办法在create-react-app中显示开发构建文件?

在create-react-app中,可以通过修改配置文件来显示开发构建文件。

首先,打开项目根目录下的package.json文件,找到scripts字段中的start命令,修改为以下内容:

代码语言:txt
复制
"start": "react-scripts start",

然后,在项目根目录下创建一个名为.env.development.local的文件,并在其中添加以下内容:

代码语言:txt
复制
GENERATE_SOURCEMAP=true

接下来,在终端中运行以下命令,重新启动开发服务器:

代码语言:txt
复制
npm start

现在,当你在浏览器中访问应用程序时,可以在开发者工具中看到构建文件。请注意,这些构建文件通常是压缩和混淆过的,因此可能不易阅读。

这种方法适用于create-react-app的开发模式。在生产模式下,构建文件默认是不可见的。如果需要在生产模式下显示构建文件,可以使用其他工具或自定义配置来实现。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,适用于各种应用场景。了解更多信息,请访问腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和处理各种类型的数据。了解更多信息,请访问腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

详解Linux清空或删除大文件内容的5种办法

有时,处理Linux终端文件时,您可能希望清除文件的内容,而无需使用任何Linux命令行编辑器打开它。怎么能实现这一目标?本文中,我们将借助一些有用的命令,通过几种不同的方式清空文件内容。...警告:我们继续查看各种办法之前,请注意,因为Linux中一切都是文件,所以必须始终确保要清空的文件不是重要的用户或系统文件。清除关键系统或配置文件的内容可能会导致致命的应用程序/系统错误或故障。...就像刚刚说的,下面是从命令行清除文件内容的办法。 重要说明:出于本文的目的,我们access.log以下示例中使用了文件。...Linux,该null设备基本上用于丢弃进程的不需要的输出流,或者作为输入流的合适空文件。...#cp / dev/null access.log 以下命令,if表示输入文件并of引用输出文件

3.2K40

【Eclipse】eclipse让Button选择的文件显示文本框里

在给定的代码片段,使用了Float.parseFloat(text)方法将文本转换为浮点数。然后,使用逻辑运算符进行条件判断,如果转换后的浮点数大于0或小于0,则执行相应的操作。...问题:Eclipse如何实现让Button选择的文件显示文本框里?回答:Eclipse,可以使用Java Swing库来实现让Button选择的文件显示文本框里的功能。...首先,需要创建一个JButton对象和一个JTextField对象,并将它们添加到一个JFrame或JPanel。...然后,可以使用JFileChooser类来创建一个文件选择对话框,并将其与按钮关联起来。当用户点击按钮时,可以通过JFileChooser选择文件,并将文件路径显示文本框

12210

您的浏览器构建和共享开发者环境

一个孤立的容器搭载一个预配置环境的想法吸引了全球领先的技术公司和数百万用户。然而,上述方法仍然需要用户下载软件和镜像,以及管理桌面。而我们Codenvy则已经有更为先进的方式。...只需点击一个按钮,就能身处于一个预先配置的开发环境,而且IDE丰富的编辑工具和项目资源尽在指尖,是不是很不错呢?本地开发,但在云中构建和运行项目,又是怎样的一种体验呢?...Codenvy构建Dockerfile与本地构建Dockerfile没有什么区别 - 相同的指令,相同的规则,相同的输出。有几个Codenvy特定的功能,如注入项目源到图像。...这个项目的源文件可以编辑,项目也可以构建和运行。用户也可以更改环境,即编辑现有的Docker文件或创建自己的配置。原来的项目和工作空间依然不会受到影响,而临时工作空间几个小时内就被销毁了。...有很多方法来配置一个Factory,施加访问和行为限制,指定加载后的动作——如在创建一个临时工作区后打开README文件,导入一个项目并引导用户完成构建和运行过程,还有项目需要的默认运行时环境(可以有多个

1.8K70

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

许多开发者已经使用了 create-react-app构建他们的 React 应用,但像我之前提到的,开发者仍呼吁更多的配置选项。...作为一个需要支持以上我高亮过的功能的开发者,一个办法就是运行 npm run eject。这条命令拷贝所有配置文件和依赖到你的项目中,然后你可以通过所有这些工具手动配置你的应用以达到满意。...解决的一个好办法是为你的团队发布一个 react-scripts 的 fork 库,然后所有团队开发者只需要运行 create-react-app my-app --scripts-version... packages 目录内,有一个叫做 react-scripts 的文件夹。该文件夹包含了用于构建、测试和启动你的应用的脚本。事实上,这就是我们能作出改进的地方,可以配置并增加新的脚本和模版。...改进配置 clone 目录后代码编辑器打开 react-scripts/scripts/init.js 文件

1.3K10

【Android Gradle 插件】组件化的 Gradle 构建脚本实现 ③ ( Gradle 构建脚本实现 AndroidManifest.xml 清单文件切换设置 )

二、 Gradle 构建脚本实现 AndroidManifest.xml 清单文件切换设置 在上一篇博客 【Android Gradle 插件】组件化的 Gradle 构建脚本实现 ① ( 组件化简介...| 创建组件化应用 | 依赖库模块 / 应用模块 切换设置 ) 最后提到了 Gradle 构建脚本 , 需要实现 依赖库模块 / 应用模块 切换设置 , 主要涉及如下两个方面 : build.gradle...构建脚本 切换设置 , 切换 应用 / 依赖库 ; AndroidManifest.xml 清单文件 切换设置 , 设置 启动 Activity 项 ; 【Android Gradle 插件】组件化的...一、AndroidManifest.xml 清单文件切换设置 ---- 应用 , 每个应用 只能有一个 启动 Activity , 如果有多个肯定会报错 ; 组件化 : 模块化模式 : 正常的模式...修改成上述配置 : 二、 Gradle 构建脚本实现 AndroidManifest.xml 清单文件切换设置 ---- 模块下 的 build.gradle 构建脚本 的 " android

2K50

zblogphp上传视频文件超过50M没反应,状态栏显示响应的解决办法

第一步: 首页zbp后台首页找到网站设置,然后点击“后台设置”,设置下上传文件的类型(默认自带mp4格式,可以忽略),设置下允许上传文件的大小,这里暂时设置200,单位是兆(MB),如图: 第二步...: 设置完程序上传大小还得前往服务器设置,找到nginx或者apache,本教程以nginx为例,找到性能调整,“client_max_body_size”设置上传最大文件显示,如图我们设置跟程序一样...,都是200,如图: 设置完成后点击“服务”重载配置即可,服务器环境设置完成,还得设置一下php,限制太多了,哎,没办法啊,找到站点所用的php版本,本站使用7.0,设置找到“配置修改”“upload_max_filesize...”设置200,跟之前一样,统一标准,如图: 设置完成后依次点击服务重载配置即可完成,然后我们回到后台重新上传附件,如图: 第三步: 是的,视频还是没有上传成功,而是不在出现413错误提示,变成了,...后台,上传附件就会发现上传成功,当然了并不建议本地服务器上传视频文件,毕竟在播放的时候走的都是自己服务器的流量,CVM还好如果是轻量云服务器的话流量是有限制的,建议用视频文件的朋友直接使用cos云存储

1.4K20

如何打开sln文件显示窗口_.sln文件设置Visual Studio默认启动项目的简单方法…

昨天一台电脑上用git新签出一个项目进行build,却出现一堆编译错误,而在原先的开发机上build无任何错误。...对比分析后发现,开发机上VS的启动项目(startup project)与这台电脑上的不一样,改为一样后,build立马成功。...要避免这个问题,就要保证git签出的VS解决方案的启动项目是一致的,然而启动项目的设置并不保存在.sln文件,而是保存在.suo文件,但是.suo文件通常不放在git,因为它经常变动。...于是问题变成了——有没有办法直接在.sln文件设置启动项目呢?...用文本编辑器打开.sln文件分析后发现原来是第一个”Project…EndProject”。

5.1K30

有没有觉得邮件发送人固定配置yml文件是不妥当的呢?SpringBoot 动态设置邮件发送人

明月当天,不知道你有没有思念的人 前言 之前其实已经写过SpringBoot异步发送邮件,但是今天一个小项目中要用到发送邮件时,我突然觉得邮件发送人只有一个,并且固定写在yml文件,就是非常的不妥当...写之前已经翻过很多博客了,该踩的坑都踩的差不多了,我是实现之后写的文章,有问题大家可以一起交流。...我先说说我想要达到什么样的效果: 邮件发送人可以是多个,yml文件是兜底配置(即数据库没有一个可用时,使用yml文件配置的邮件发送人) 项目启动后,我也可以临时增加邮件发送人,或者禁用掉某个邮件发送人...465端口(SMTPS)︰它是SMTPS协议服务所使用的其中一个端口,它在邮件的传输过程是加密传输(SSL/TLS)的,相比于SMTP协议攻击者无法获得邮件内容,邮件一开始就被保护了起来。...* 最后就是加个兜底的,如果数据库查询不到邮件发送人,我们使用配置文件的发送邮件的配置。 */ if(mails!=null&&!

1.1K40

我想学习 node.js,但是应该如何开始?

有没有路线图(Roadmap)可以进行系统学习? 1. 如何开始学习 Node? 「根据公司的需求学习 node.js,需求中进行学习,时间充分,成长快,事半功倍。」...而这部分,最容易在工作获得需求,如「构建一个脚手架」,也容易作为自己的 KPI/OKR。通过此,可获得 node 关于 「文件系统」、「终端操作」 一系列知识。...如果业务不需要构建一个脚手架,那也有诸多的场景需要写一个脚本,其中涉及最多的也是文件系统。 比如,详细了解并完成一个脚手架后,你至少可以了解一个问题? 「如何判断文件是否存在?」...lru-cache[8]: LRU Cache,前端及服务端框架的常用依赖。...长按识别二维码查看原文 https://github.com/isaacs/node-lru-cache tsdx[9]: 零配置的 npm 库开发利器,与 CRA 相似,不过它主要面向库开发者而非业务开发

76730

React基础(1)-create-react-app

用于构建用户界面的javascript库,MVC架构的V层 声明式开发(想要实现什么目的,应该做什么,但是不指定具体怎么做,如下代码所示) 面向数据编程,只要把数据构建好了就可以了的,react会自动的帮你去构建网站...,把数据可以理解为图纸,图纸做好了之后,react会自动的结合这张图纸帮助你去构建这个大厦,去构建整个页面的DOM,数据是什么,页面就显示什么,这种声明式的开发帮助我们节约掉大量的DOM操作代码,这是react...为了加快重建速度 注意:Webpack只处理src文件。...的组件 react中一个重要的思想就是通过组件(Component)来开发应用,所谓组件,就是指能够完成某个特定功能的独立的,可重用的代码(页面的某一部分) 基于组件的应用开发是广泛使用的软件开发模式...如果你有用过AngularJS的话,可以把组件理解为类似指令的概念,现今的开发模式里,基于组件化开发是非常流行的 react非常适合构建用户交互组件 一个react应用其实就是一颗由组件构成的树 在这颗树的根结点

1.6K71

React学习(一)-create-react-app

用于构建用户界面的javascript库,MVC架构的V层 声明式编程(想要实现什么目的,应该做什么,但是不指定具体怎么做,如下代码所示) 面向数据编程,只要把数据构建好了就可以了的,react会自动的帮你去构建网站...,把数据可以理解为图纸,图纸做好了之后,React会自动的结合这张图纸帮助你去构建这个大厦,去构建整个页面的DOM 数据是什么,页面就显示什么,这种声明式的开发帮助我们节约掉大量的DOM操作,这是React...// 首页入口index的样式 ├── index.js // 整个程序运行的入口文件,这个应用所做的事情是,只是渲染一个名叫App的组件,App组件同目录下的App.js文件定义 ├── logo.svg...React的组件 react中一个重要的思想就是通过组件(Component)来开发应用,所谓组件,就是指能够完成某个特定功能的独立的,可重用的代码(页面的某一部分) 基于组件的应用开发是广泛使用的软件开发模式...如果你有用过AngularJS的话,可以把组件理解为类似指令的概念,现今的开发模式里,基于组件化开发是非常流行的 react非常适合构建用户交互组件 一个React应用其实就是一颗由组件构成的树,其实另外两个框架

1.4K20

为什么要用vue-cli3?

产生这个问题的原因是试用完vue-cli3之后并没有觉得好用,反而觉得束手束脚,我cli2时,webpack想怎么配怎么配为什么到了cli3我要在vue.config.js配置 众所周知vue-cli...的通用配置并不适合每种情况, 而在vue.config.js只能做增添和覆盖,所以一直没有用vue-cli3构建项目 所以想请教下 这个版本有没有值得升级的优点 我的回答 好问题,vue-cli3相对vue-cli...特殊化操作应该封装到vue-cli的插件。这就引出了vue-cli3的另外一个特色:插件 ---- 2. 插件化 相比create-react-app, vue-cli是太仁慈了。...react-app-rewired进行扩展) (可以配置 babel,postcss,Typescript); 提供了 Node API; 支持插件扩展文件类型 多页面 支持 - 支持 适用范围 Vue...快速原型开发 vue-cli3也支持直接将一个vue文件跑起来,快速原型开发或验证某些想法时,挺不错。 ---- 5.

1.1K20

create-react-app项目支持多入口注意事项

利用react-app-rewired没有办法优雅的实现多入口官方文档At this point in time, it is difficult to change the entry point...入口文件inex.tsx中导入其他入口2. 使用自定义的支持多入口react-scripts包来更改入口3....重写覆盖函数react-dev-utils/checkRequiredFiles来始终返回true(目的是为了绕过CRA强制校验入口文件)三种方法都不够优雅,最终我的项目还是eject暴露webpack...开发模式重定向配置举例需要拆分业务页面和登录页面,业务页面为域名首页即 / 即可重定向到 index.html,而登录页为/login,如何重定向到 login.html,大部分资料中会建议如下配置historyApiFallback...login.html/, to: '/build/login.html' }, { from: /^\/login/, to: '/login.html' }, ]}, 这样子访问 /login 就可以正确显示

1K10

React环境搭建

npm i -g create-react-app只需要执行一次,后面你在任意目录执行create-react-app project就可以创建一个react项目的脚手架,这免去了开发者很多配置的工作。...npx安装需要的npm版本5.2.0以上,它的原理大致是先去全局的node_modules下找找看有没有这个包,没有的话再去本地项目找找有没有这个包,还是没有就去远程拉一个最新的下来。...函数,我们返回一段html代码,写着一个加一个减按钮,然后显示相应的包。...引入我们创建的类,并加入到渲染函数 import ClickCounter from '....因为React设计state时候是异步的,当你调用setState的时候,它会被放入异步队列,所以它也不是马上去改变state里面的数据。

1.5K20
领券