react快速开始(三)-create-react-app脚手架项目启动;使用VScode调试react

这篇具有很好参考价值的文章主要介绍了react快速开始(三)-create-react-app脚手架项目启动;使用VScode调试react。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

react快速开始(三)-create-react-app脚手架项目启动;使用VScode调试react

一、create-react-app脚手架项目启动

create-react-app(以下简称cra)作为react官方提供的脚手架工具,是目前生成react项目一个非常常用和主流的工具。很多企业级的应用搭建也是基于这个脚手架工具上二次开发

create-react-app脚手架 生成的 package.json中 scripts如下:

react快速开始(三)-create-react-app脚手架项目启动;使用VScode调试react,web前端/桌面前端/js/ts/ui设计/,react.js,vscode,前端
我们看到分别是项目的启动开发环境,构建,测试的命令只有启动,没有debug模式,那么我们要在vscode中添加断点调试如何做呢?

1. react-scripts

react-scripts的工作原理
参考URL: https://www.jianshu.com/p/20362733902a/

react-scripts是create-react-app入门包中的一组脚本;create-react-app可以启动项目而无需进行配置;react-scripts start可以设置开发环境并启动服务器,以及热模块重新加载。

create-reate-app 的使用

npx create-react-app my-app
cd my-app
npm start

从上面代码中可以看出执行npm start 命令时,运行的是react-scripts start,由此可见react-scripts 这个库,是启动这个项目的核心,它这里封装了些什么呢?

.bin/react-scripts.cmd 文件中得出,react-scripts start 等命令,实际上调用的是 …\react-scripts\bin\react-scripts.js这个文件。

正是因为有了react-scripts的集成化能力,项目目录才会如此简洁。
但这也限制了灵活性,使得我们很难对其内部做出修改。

npm run eject

如果熟悉webpack的小伙伴,知道package.json中的配置会很多,而react脚手架中的package.json中,依赖为什么这么少。这是因为像webpack,babel等等都是被creat react app封装到了react-scripts这个项目当中,包括基本启动命令 都是通过调用react-scripts这个依赖下面的命令进行启动的。npm run eject,会将原本creat react app对webpack,babel等相关配置的封装弹射出来,如果我们要将creat react app配置文件进行修改,现有目录下是没有地方修改的,此时,**我们就可以通过eject命令将原本被封装到脚手架当中的命令弹射出来,然后就可以在项目的目录下看到很多配置文件。**但这个操作是不可逆的,我们无法再通过其他方式将这些暴露出来的配置还原回去。

npm run eject 意思是开发者开始管控和自定义处理所有配置项和打包配置,而且是永久性的
如果想要自己修改webpack之类的配置需要执行npm run eject弹出配置文件 但这个操作是不可逆的。

一般不需要做这个操作!

2. 关于better-npm-run

通过better-npm-run这个包,我们把脚本命令写得更具有层次感,虽然代码量增加了,但结构更加清晰。

然后你就可以在你的package.json里面使用一个新的字段—— "betterScripts"字段

better-npm-run安装
npm i better-npm-run

然后你就可以在你的package.json里面使用一个新的字段—— "betterScripts"字段,它和"scripts"字段很像,那么两者间有什么联系呢?

"scripts": {
   "test": "NODE_ENV=production karma start"
}

变成:

"scripts": {
    "test": "better-npm-run test"
},
"betterScripts": {
    "test": {
        "command": "karma start",
        "env": {
            "NODE_ENV": "test"
          }
       }
}

二、使用VScode调试react

背景:
在面向dom开发的时代,我们开发时直接在chrome里打断点是很方便的。
但是,当我们面向组件开发时(react),浏览器拿到的是我们编译过后的代码,还想在浏览器里打断点几乎是不可能的了。

1. 浏览器插件React Developer Tools

官方:https://react.dev/learn/react-developer-tools
**调试使用 React 构建的网站的最简单方法是安装 React Developer Tools 浏览器扩展。**它适用于多种流行的浏览器:
现在,如果您访问使用 React 构建的网站,您将看到“组件”和“分析器”面板。
react快速开始(三)-create-react-app脚手架项目启动;使用VScode调试react,web前端/桌面前端/js/ts/ui设计/,react.js,vscode,前端文章来源地址https://www.toymoban.com/news/detail-688667.html

2. 【重点】用 VSCode debugger 来调试

  1. 安装 VSCode 调试插件
    Debugger for Chrome 扩展已经被废弃,改为使用 JavaScript Debugger (Nightly)
    这个扩展是 VS Code 自带的新 JavaScript 调试器,可以替代 Debugger for Chrome。
    react快速开始(三)-create-react-app脚手架项目启动;使用VScode调试react,web前端/桌面前端/js/ts/ui设计/,react.js,vscode,前端
    在项目根目录下创建 .vscode/launch.json 文件,添加配置:
{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceFolder}"
      }
    ]
  }
  
  1. 设置断点,启动项目,打开调试面板
  2. 选择刚才的配置,点击启动调试按钮即可在 Chrome 中调试

到了这里,关于react快速开始(三)-create-react-app脚手架项目启动;使用VScode调试react的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React官网力荐Next.js:为何它取代了Create-React-App?

    随着前端技术的快速发展,React作为一款领先的JavaScript库,不断推动着前端开发的变革。近期,React官网的一个显著变化引起了广大开发者的关注:它不再推荐使用Create-React-App作为构建React应用的默认工具,而是转向了Next.js。 那么,Next.js究竟有何魔力,让React官网做出如此决

    2024年04月26日
    浏览(33)
  • react create-react-app v5 从零搭建(使用 npm run eject)

    好久没用 create-react-app做项目了,这次为了个h5项目,就几个页面,决定自己搭建一个(ps:mmp 好久没用,搭建的时候遇到一堆问题)。 我之前都是使用 umi 。后台管理系统的项目 使用 antd-pro框架。实际上antd-pro 是基于umi搭建集成的框架。里面封装好了各种东西,开箱即用。

    2024年02月07日
    浏览(38)
  • react create-react-app v5配置 px2rem (暴露 eject方式)

    create-react-app v5 “react”: “^18.2.0” “postcss-plugin-px2rem”: “^0.8.1” 我这个方式是 npm run eject 暴露 webpack配置的方法 1.安装 postcss-plugin-px2rem 和 lib-flexible (注意这里安装 postcss-px2rem、px2rem这类都行,都是 px2rem衍生的库,不过不同的库具体配置不一样,建议查看文档具体有哪些

    2024年02月07日
    浏览(36)
  • react create-react-app v5配置 px2rem (不暴露 eject方式)

    create-react-app v5 “react”: “^18.2.0” “postcss-plugin-px2rem”: “^0.8.1” 不暴露 eject 配置自己的webpack: 1.下载react-app-rewired 和 customize-cra-5 2.在项目根目录创建一个config-overrides.js 文件 3.安装 postcss-plugin-px2rem 和 lib-flexible (注意这里安装 postcss-px2rem、px2rem这类都行,都是 px2rem衍生

    2024年02月07日
    浏览(36)
  • 使用 create-react-app 搭建项目ts+less+antd+redux+router+eslint+prettier+axios

    当前市面上有很多前端框架或者模板、如:umi、dva、antd-design-pro、create-react-app 等一些框架或者模板。 create-react-app 是 react 官方提供的,相对来说比较干净一些。 此项目是在 create-react-app 的基础上进行搭架、项目采用 ts 语法 项目整体上会添加上以下功能: 完整项目代码 传

    2024年02月03日
    浏览(41)
  • VUE L ∠CREATE&RUN脚手架 ⑩③

    提示:以下是本篇文章正文内容 简介 : Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支

    2024年02月10日
    浏览(46)
  • 新一代Vue脚手架(create-vue)

    Vue2.X中创建一个项目,我们基本都会选择Vue官方提供的脚手架工具Vue-cli(也可以基于webpack手动搭建这都没问题),如果想了解Vue-cli创建项目的过程,可以查看Vue-cli创建Vue项目工程步骤详解。 后来尤大新出了Vite,我们可以使用Vite创建项目,但是只能选择官方提供的固定配置

    2024年02月05日
    浏览(36)
  • React应用(基于React脚手架)

    react 是前端三大框架中之一,而且大公司基本都在用react 包括百度也在使用 他有自己的独特的虚拟dom build-react-cli是帮助你快速创建生成react项目的脚手架工具,配置了多种可选择的不同类型项目模版。 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需

    2023年04月21日
    浏览(35)
  • 【源码】Vue.js 官方脚手架 create-vue 是怎么实现的?

    本文共分为四个部分,系统解析了 vue.js 官方脚手架 create-vue 的实现细节。 第一部分主要是一些准备工作,如源码下载、项目组织结构分析、依赖分析、功能点分析等; 第二部分分析了 create-vue 脚手架是如何执行的,执行文件的生成细节; 第三部分是本文的核心部分,主要

    2024年02月09日
    浏览(43)
  • 安装React脚手架

    在安装React脚手架之前,你需要决定使用哪个包管理工具。这里我们选择使用npm。运行下面的命令来安装React脚手架: 这个命令会在全局安装React脚手架工具create-react-app。 现在,你已经准备好创建一个新的React应用程序了。使用下面的命令来创建一个名为myreactapp的React应用程

    2024年02月09日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包