react快速開始(三)-create-react-app腳手架項目啟動；使用VScode調(diào)試react
一、create-react-app腳手架項目啟動
create-react-app（以下簡稱cra）作為react官方提供的腳手架工具，是目前生成react項目一個非常常用和主流的工具。很多企業(yè)級的應(yīng)用搭建也是基于這個腳手架工具上二次開發(fā)
create-react-app腳手架 生成的 package.json中 scripts如下：
我們看到分別是項目的啟動開發(fā)環(huán)境，構(gòu)建，測試的命令只有啟動，沒有debug模式，那么我們要在vscode中添加斷點調(diào)試如何做呢？
1. react-scripts
react-scripts的工作原理
參考URL: https://www.jianshu.com/p/20362733902a/
react-scripts是create-react-app入門包中的一組腳本；create-react-app可以啟動項目而無需進行配置；react-scripts start可以設(shè)置開發(fā)環(huán)境并啟動服務(wù)器，以及熱模塊重新加載。
create-reate-app 的使用
npx create-react-app my-app
cd my-app
npm start
從上面代碼中可以看出執(zhí)行npm start 命令時，運行的是react-scripts start，由此可見react-scripts 這個庫，是啟動這個項目的核心，它這里封裝了些什么呢？
從.bin/react-scripts.cmd 文件中得出，react-scripts start 等命令，實際上調(diào)用的是 …\react-scripts\bin\react-scripts.js這個文件。
正是因為有了react-scripts的集成化能力，項目目錄才會如此簡潔。
但這也限制了靈活性，使得我們很難對其內(nèi)部做出修改。
npm run eject
如果熟悉webpack的小伙伴，知道package.json中的配置會很多，而react腳手架中的package.json中，依賴為什么這么少。這是因為像webpack，babel等等都是被creat react app封裝到了react-scripts這個項目當中，包括基本啟動命令 都是通過調(diào)用react-scripts這個依賴下面的命令進行啟動的。npm run eject，會將原本creat react app對webpack，babel等相關(guān)配置的封裝彈射出來，如果我們要將creat react app配置文件進行修改，現(xiàn)有目錄下是沒有地方修改的，此時，**我們就可以通過eject命令將原本被封裝到腳手架當中的命令彈射出來，然后就可以在項目的目錄下看到很多配置文件。**但這個操作是不可逆的，我們無法再通過其他方式將這些暴露出來的配置還原回去。
npm run eject 意思是開發(fā)者開始管控和自定義處理所有配置項和打包配置,而且是永久性的
如果想要自己修改webpack之類的配置需要執(zhí)行npm run eject彈出配置文件 但這個操作是不可逆的。
一般不需要做這個操作！
2. 關(guān)于better-npm-run
通過better-npm-run這個包，我們把腳本命令寫得更具有層次感，雖然代碼量增加了，但結(jié)構(gòu)更加清晰。
然后你就可以在你的package.json里面使用一個新的字段—— "betterScripts"字段
better-npm-run安裝
npm i better-npm-run
然后你就可以在你的package.json里面使用一個新的字段—— "betterScripts"字段，它和"scripts"字段很像,那么兩者間有什么聯(lián)系呢?
"scripts": {
"test": "NODE_ENV=production karma start"
}
變成：
"scripts": {
"test": "better-npm-run test"
},
"betterScripts": {
"test": {
"command": "karma start",
"env": {
"NODE_ENV": "test"
}
}
}
二、使用VScode調(diào)試react
背景：
在面向dom開發(fā)的時代，我們開發(fā)時直接在chrome里打斷點是很方便的。
但是，當我們面向組件開發(fā)時(react),瀏覽器拿到的是我們編譯過后的代碼，還想在瀏覽器里打斷點幾乎是不可能的了。文章來源：http://www.zghlxwxcb.cn/news/detail-688667.html
1. 瀏覽器插件React Developer Tools
官方：https://react.dev/learn/react-developer-tools
**調(diào)試使用 React 構(gòu)建的網(wǎng)站的最簡單方法是安裝 React Developer Tools 瀏覽器擴展。**它適用于多種流行的瀏覽器：
現(xiàn)在，如果您訪問使用 React 構(gòu)建的網(wǎng)站，您將看到“組件”和“分析器”面板。
文章來源地址http://www.zghlxwxcb.cn/news/detail-688667.html
2. 【重點】用 VSCode debugger 來調(diào)試
- 安裝 VSCode 調(diào)試插件
Debugger for Chrome 擴展已經(jīng)被廢棄,改為使用 JavaScript Debugger (Nightly)。
這個擴展是 VS Code 自帶的新 JavaScript 調(diào)試器,可以替代 Debugger for Chrome。
在項目根目錄下創(chuàng)建 .vscode/launch.json 文件,添加配置:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
- 設(shè)置斷點,啟動項目,打開調(diào)試面板
- 選擇剛才的配置,點擊啟動調(diào)試按鈕即可在 Chrome 中調(diào)試
到了這里，關(guān)于react快速開始(三)-create-react-app腳手架項目啟動；使用VScode調(diào)試react的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
