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

react CRA -从构建中排除调试代码

React CRA是指React Create App,是一个用于快速创建React应用程序的脚手架工具。它提供了一个简单的命令行界面,可以帮助开发人员快速搭建React项目的基本结构和配置。

在React CRA中,构建过程中排除调试代码可以通过以下步骤实现:

  1. 打开项目的根目录,在终端或命令行中运行以下命令以启动React应用程序的开发服务器:
  2. 打开项目的根目录,在终端或命令行中运行以下命令以启动React应用程序的开发服务器:
  3. 在浏览器中打开应用程序,并使用开发者工具(通常是按下F12键)打开调试控制台。
  4. 在调试控制台中,找到并点击"Sources"(或类似名称)选项卡,以查看应用程序的源代码。
  5. 在源代码中,找到需要排除的调试代码部分,并将其注释或删除。
  6. 保存更改后,应用程序将自动重新加载,并排除了调试代码。

React CRA的优势和应用场景如下:

优势:

  • 快速搭建:React CRA提供了一个简单易用的脚手架工具,可以快速搭建React应用程序的基本结构和配置,节省了开发人员的时间和精力。
  • 零配置:React CRA默认配置了一系列常用的开发工具和库,如Webpack、Babel等,使得开发人员无需手动配置,即可开始开发React应用程序。
  • 热模块替换:React CRA支持热模块替换(Hot Module Replacement),在开发过程中可以实时预览和调试代码的变化,提高开发效率。

应用场景:

  • 原型开发:React CRA适用于快速创建React应用程序的原型,可以帮助开发人员快速验证和演示想法。
  • 小型项目:对于小型的个人或团队项目,React CRA提供了一个简单的起点,可以快速搭建和开发。
  • 学习和教育:React CRA提供了一个简单易用的学习和教育工具,可以帮助初学者快速上手React开发。

腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):提供可扩展的云服务器实例,用于部署和运行React应用程序。详情请参考:云服务器
  • 云开发(CloudBase):提供一站式云端研发平台,支持前后端一体化开发和部署。详情请参考:云开发
  • 云存储(COS):提供安全可靠的对象存储服务,用于存储React应用程序的静态资源和文件。详情请参考:云存储
  • 云网络(VPC):提供安全可靠的私有网络环境,用于搭建React应用程序的网络架构。详情请参考:云网络
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端工程化之概念介绍

React 否 是 React 官方维护 Vue CLI Vue 是 是 Vue官方维护 「CRA」: Facebook 官方提供的 React 开发工具集, 包含两个基础包 自定义配置能力 react-app-rewired...为 CRA 创建自定义模板 作为一个最简化的 CRA 模板,模板包含如下必要文件 README.md:用于在 npm 仓库显示的「模板说明」 package.json:用于描述模板本身的「元信息」,...是否包含列信息」在不包含列信息的情况下,调试时只能定位到指定代码所在的行而定位不到所在的列 ---- 不同预设的效果总结 分别从「质量」/「构建速度」/「包大小和生成方式」三个角度来分析 质量 生成的...在开发阶段,调试的是开发的业务代码部分,而非依赖的第三方模块部分,所以在生成 source map 的时候如果可以「排除第三方模块」的部分,而只生成业务代码的 source map,无疑能进一步提升构建的速度...但是,我们传入 exclude 参数,「排除第三方依赖包的 source map 生成」。进一步提升了构建的速度。

71910

VS Code 调试完全攻略(5):基于浏览器的 React 应用

这次我们来研究怎样把调试器连接到用 Create React App 生成的 React 程序。你将看到如何 VS Code 启动浏览器并检查远程异步 API 调用。...它超级强大,同时又很容易,所以在调试 CRAReact 程序时没有理由不这样做。 ? VS Code 调试完全攻略系列目录 ?...代码设置 为了加快速度,我准备了一个简单的 React 应用,你要做的就是检出代码并启动 CRA 开发服务器: git clone git@github.com:thekarel/debug-anything.git...首先,你可以用 npm start 在控制台中启动开发服务器,顺便说一下,这也可以在 VS Code 完成。 ? 启动脚本 接下来,调试侧边栏或通过按 F5 键启动调试浏览器: ?...启动浏览器 像往常一样向代码添加断点: ? 断点 然后在调试浏览器与网站进行交互,但是这次启用了调试功能?让我们来看看在示例程序成功的 fetch 是什么样子的: ?

2.2K20

Create React App 源码揭秘

如果直接在当前仓库查看,甚至修改进行本地调试,那阅读别人代码会更加得心应手。...packages/cra-tempalte cra-tempalte可以cra-tempalte拷贝,启动一个简易React单页应用。...// 为了解决这个问题,我们阻止你src/导入文件——如果你愿意, // 请将这些文件链接到node_modules/,然后让模块解析开始。...这经常会引起混乱,因为我们只使用babel处理src/的文件。 为了解决这个问题,我们阻止你src/导入文件——如果你愿意, 请将这些文件链接到node_modules/,然后让模块解析开始。...,对构建工具提出了更高要求,要能构建各种相关模块 仓库体积会变大 使用monorepo管理的优点 一个仓库维护多个模块,不用到处找仓库 方便版本管理和依赖管理,模块之间的引用、调试都非常方便,配合相应工具

3.5K20

React为什么不将Vite作为默认推荐?

React文档,对于构建新的React应用,首推的方式是CRA(create-react-app)。...「Theo」就在React文档仓库发起了一个PR[1],号召React文档不要再默认推荐CRA,而是应该将Vite作为构建应用的首选。...试想,如果没有CRA的推动,Hooks的lint规则很难在开发者中有这么高普及率,Hooks的理念也就不会这么快席卷整个前端框架领域。 以上三点来看,Vite完全可以成为比CRA性能更优的替代品。...这个问题常见的解决方法是 —— 将请求数据的逻辑收敛到路由方案。 再比如,随着业务不断迭代,业务代码体积越来越大,常见的优化手段是懒加载组件。 但是,手动执行懒加载常常会产生意料之外的问题。...并且,在实现上,可能将兜底方案的webpack切换为Vite。 总结 React团队的思考可以发现,React始终将自己定位为一个「状态驱动UI」的库。

1.2K10

cra 等非 umi 项目中使用 dumi2

但如果项目是使用 cra (create-react-app) 或其他技术栈搭建的,就需要做一些额外的配置。本文将介绍如何在 cra 等非 umi 项目中使用 dumi。 1....新建文档目录 dumi/docs/,这里的 dumi 目录即第二步配置的环境变量,你可以随意同步修改。 5. 新建文档 dumi/docs/index.md。...# 这是一个 Dumi 结合 create-react-app 的 Demo 6. 将 dumi 的临时文件添加到 .gitignore 。 .dumi 7....如果想要构建文档并部署到 GitHub Pages 或其他平台,你可以运行 yarn dumi-build 命令来生成静态文件,并根据部署平台的要求进行相应的配置。...通过上面的步骤,就可以在 cra 等非 umi 项目中使用 dumi 来编写和调试组件文档了。 当然,这只是一个基本的入门教程,dumi 还有很多强大的功能和特性等待你去探索和利用。

35840

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

可即便是应用了 CRA 这么棒的工具,开发者仍需要稍作调整,增加 CRA 不含的特别的脚本和模块等。今天,我将教你如何为自己的团队创建自定义的 create-react-app 脚本。...有很多包括 JavaScript 新人在内的开发者,一天天的简直是胡乱地创建 React 应用,所以 Facebook 的 CRA 团队才构建了 create-react-app 工具以使创建此类应用的过程更快更安全...改进配置 clone 目录后在代码编辑器打开 react-scripts/scripts/init.js 文件。...、将 repository 的值指向正确的地址(本例为 unicodelabs/create-react-app)。 现在,终端中进入 react-scripts 目录: ?...CRA 会执行安装,然后你将看到: ? 记得吗?我们早先把这些信息放在了代码里。太棒了!

1.3K10

React源码学习进阶篇(一)新版React如何调试源码?

React 16版本之后,对源码架构进行了较大的升级调整,项目gulp/grunt迁移到rollup,采用多包构建的方式组织代码,我们常常debug的是打包后的文件,本文可以解决我们想debug到源码的问题...-20220902202201589 我们先启用VSCode的调试模式,在项目下新建一个launch.json(注意我这里cra启动的端口是3001): { // Use IntelliSense...VSCode来调试了: image-20220902202630782 但是目前还只能调试打包后的代码,我们需要定位到源码。...下载React源码 git clone https://github.com/facebook/react.git 然后我们在React下编译一下代码: yarn yarn build 接着我们去外层...(如果看不到的话,确认下create-react-app引用react-dom的地方,要把/client去掉)。

89520

我们如何使用 Next.js 将 React 加载时间缩短 70%

Causal 的前端是在 2019 年用 Create React App(CRA构建的,它为我们提供了很好的服务——它只需要最小的初始设置,并允许快速迭代。... CRA 迁移到 Next.js 在 2022 年中期,我们认为 CRA 迁移到 Next.js 的好处是值得投入时间的。...这意味着访问一个用于本地开发的页面只需要构建该页面所需的包内容。虽然 CRA 支持代码分割,但根据我们的经验,Next.js 配置对于本地重建来说是开箱即用的,速度快得多。...样式 Causal 代码的许多旧的 CSS 文件是在团队对 CSS 模块的最佳实践进行标准化之前编写的。...在这里,CRA 和 Next.js 有根本的区别。CRA构建输出只是静态文件,所以提供它相对简单。Next.js 的构建输出确实包括一些静态文件,但它也可能包括运行一个单独服务器的代码

4.7K10

前端工程化_知识点精讲

是 Vue官方维护 「CRA」: Facebook 官方提供的 React 开发工具集, 包含两个基础包 create-react-app 用于选择脚手架「创建项目」 react-scripts...在开发阶段,调试的是开发的业务代码部分,而非依赖的第三方模块部分,所以在生成 source map 的时候如果可以「排除第三方模块」的部分,而只生成业务代码的 source map,无疑能进一步提升构建的速度...但是,我们传入 exclude 参数,「排除第三方依赖包的 source map 生成」。进一步提升了构建的速度。...DllPlugin 它的核心思想是将项目依赖的框架等模块「单独构建打包」,与普通构建流程区分开。 事先把常用但又构建时间长的代码提前打包好(例如 reactreact-dom),取个名字叫 dll。...❞ ---- Externals Webpack 配置的 externals 和 DllPlugin 解决的是同一类问题。「将依赖的框架等模块构建过程移除」。

1.7K20

使用 craco 对 cra 项目进行构建优化

如果想要无 eject 重写 CRA 配置,目前成熟的是下面这几种方式 通过 CRA 官方支持的 --scripts-version 参数,创建项目时使用自己重写过的 react-scripts 包使用...目前的 craco 最新版本 v6.4.3 仅支持 cra4 创建的项目 构建体积分析首先引入了 webpack-bundle-analyzer 这个插件来分析一下构建产物的组成 /* craco.config.js...代码拆分,减少重复打包由于使用了懒加载,每个页面都对应一个独立的 chunk 文件。有些使用比较频繁的库,会被重复打包进每个 chunk ,增加了很多体积。...,体积 24M -> 6.8M 左右,提升还是非常大的。...通过了代码分割的方式减少库被重复打包,以及按需加载一些很大的库,同时通过一些缓存的插件提升了构建速度。 最后 如果你觉得此文对你有一丁点帮助,点个赞。

1.4K20

vue-cli

CLI 也是这个指导思想下的产物, 例如通过它提供的 CLI,可以在15 分钟内构建一个简易的博客, 可以通过 CLI 启动服务器和 REPL、生成项目脚手架、生成代码文件、路由、数据库迁移等等: image.png...,可以看出 vue-cli 是一个扩展性非常强的构建工具,以致于它不仅限于 Vue,也可以用来构建 React 甚至其他前端框架。...一个典型的例子就是它不内置开启 babel 装饰器转译,CRA 团队认为已经废弃(或者不成熟)的语言特性不应该带到 CRA ; 后面为了给‘优雅’地给 babel 扩展插件,就捣鼓出来了babel-macro...这种强约定也是有好处的,比如不需要管理配置; 而且 CRA 团队谨慎可靠地维护着 CRA,这使得开发者可以一般无痛地升级 CRA....而 babel 的 preset 是一个插件集合,他可以统一收纳和管理一组插件方案. 例如babel-preset-react、 babel-preset-env.

3.1K10

【前端部署第四篇】使用 Docker 构建缓存及多阶段构建优化单页应用

终于可以来一个与真实项目接近带有复杂度的项目,以 CRA 部署为例: 「部署一个 Creact React APP2 单页应用。」...「CRA 是 /build 目录」。 以下,便是在 cra 获得静态资源的命令。...# 创建一个 cra 应用 $ npx create-react-app cra-deploy # 进入 cra 目录 $ cd cra-deploy # 进行依赖安装 $ yarn # 对资源进行构建...由于需要构建,需要 node 的运行环境,因此选择 node。 将以上几个脚本命令放在 RUN 指令。 启动服务命令放在 CMD 指令。...「那 Docker 是不也可以做到这一点?」 在 Dockerfile ,对于 ADD 指令来讲,如果「添加文件内容的 checksum 没有发生变化,则可以利用构建缓存」。

1.4K20

创建 React 应用的 7 种方式,你用过几种?

package.json ,我们可以看到以下几个命令,Create React App 将构建代码封装在 react-scripts 。...代码,会变得非常冗长,单 jest 配置代码就超过 1 屏。...vite 采用浏览器支持 ES 模块来解决开发时构建缓慢的问题,使用 esbuild 预构建依赖(开发时不会变动的纯 JavaScript 代码,一般是 node_modules 的第三方包)。...StackBlitz 支持多种前端框架,如 React、Angular、Vue、Next.js、Nodejs 等,并提供了自动构建、热更新、代码预览等功能。...StackBlitz 会自动创建一个新的 React 项目,并打开编辑器界面。 在编辑器,可以编辑代码,并预览效果。 在编辑器,也可以管理项目的文件,并保存项目的修改。

6.3K10

create-react-app (CRA) 项目开启 sass sourcemap

官方不支持本地调试开启 sass 的 sourcemap(今年 3 月的某个版本曾经支持过),笔者也没有找到 react-app-rewired 支持的方法,所以修改了 config-overrides.js...这个问题去年开始就有国外开发者提 issue 了,中间一度 CRA 发布了支持版本,但由于这个原因又回滚了该特性,目前处于本地开发是不支持 sourcemap 的(可见官方文档)。...[QQ20190718-175333.png] 我们目前用的是 react-app-rewired 来新增项目的 webpack 配置,但是没有找到开启 sourcemap 的方法。...注:eject 方案不推荐使用,CRA 的目的即是开箱即用。eject 之后就是走 webpack 配置工程师的道路,且这是个不可回滚的操作。...参考资料 Create React App 使用 如何扩展 Create React App 的 Webpack 配置 打破砂锅问到底:详解Webpack的sourcemap devtool

1.8K20
领券