首页
学习
活动
专区
工具
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):提供安全、稳定、低成本的对象存储服务,适用于存储和处理各种类型的数据。了解更多信息,请访问腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

X# 开发 Winform 项目在 gridView 中显示数据

在学习X#过程中,我感到最大的难度或应用阻碍在几方面: X# 在国内没有生态,可能除了 xinjie 老师的群,几乎没人关注 帮助文件全是E文,里面说明过于简单粗糙,示例代码太少,有些还是未实现的(todo...没有系统的学习资料,很多需要摸索 VFP 一些核心的内容还是没有实现,如缓冲及提交更新等,要么就是我还没掌握 下面,我将使用X#开发一个Windows Form应用,实现一个最基本的从SQL服务器查询数据并显示在...form设计及代码 回到 form 设计界面,我们往 form 中拖入一个 DataGridView 组件用于记录表格显示。...我们再回头看这个 form1.prg 文件里的代码: 主要代码我写了注释,从功能上就是在窗体运行时,连接 SQL 数据库,并执行一个 SQL 查询,将集合记录显示在 gridView 组件里。...VFP 里每个项目都要指定一个“主”文件,也就是项目管理器里显示粗体的那个文件(main file),例如我一般命名为 main.prg。

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

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

    17310

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

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

    1.9K70

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

    【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

    2.1K50

    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.6K20

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

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

    5.3K30

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

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

    1.2K40

    我想学习 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 相似,不过它主要面向库开发者而非业务开发者

    79430

    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

    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.6K20

    为什么要用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 就可以正确显示

    1.1K10
    领券