做神马网站,七台河北京网站建设,外文网站建设,做网站的外包公司文章目录 react快速开始(三)-create-react-app脚手架项目启动#xff1b;使用VScode调试react一、create-react-app脚手架项目启动1. react-scripts2. 关于better-npm-runbetter-npm-run安装 二、使用VScode调试react1. 浏览器插件React Developer Tools2. 【重点】用 VSCode … 文章目录 react快速开始(三)-create-react-app脚手架项目启动使用VScode调试react一、create-react-app脚手架项目启动1. react-scripts2. 关于better-npm-runbetter-npm-run安装 二、使用VScode调试react1. 浏览器插件React Developer Tools2. 【重点】用 VSCode debugger 来调试 react快速开始(三)-create-react-app脚手架项目启动使用VScode调试react
一、create-react-app脚手架项目启动
create-react-app以下简称cra作为react官方提供的脚手架工具是目前生成react项目一个非常常用和主流的工具。很多企业级的应用搭建也是基于这个脚手架工具上二次开发
create-react-app脚手架 生成的 package.json中 scripts如下 我们看到分别是项目的启动开发环境构建测试的命令只有启动没有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中依赖为什么这么少。这是因为像webpackbabel等等都是被creat react app封装到了react-scripts这个项目当中包括基本启动命令 都是通过调用react-scripts这个依赖下面的命令进行启动的。npm run eject会将原本creat react app对webpackbabel等相关配置的封装弹射出来如果我们要将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_ENVproduction 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 构建的网站您将看到“组件”和“分析器”面板。
2. 【重点】用 VSCode debugger 来调试
安装 VSCode 调试插件 Debugger for Chrome 扩展已经被废弃,改为使用 JavaScript Debugger (Nightly)。 这个扩展是 VS Code 自带的新 JavaScript 调试器,可以替代 Debugger for Chrome。 在项目根目录下创建 .vscode/launch.json 文件,添加配置:
{version: 0.2.0,configurations: [{type: chrome,request: launch,name: Launch Chrome against localhost,url: http://localhost:3000,webRoot: ${workspaceFolder}}]}
设置断点,启动项目,打开调试面板选择刚才的配置,点击启动调试按钮即可在 Chrome 中调试
