×ðÁú¿­Ê±¹ÙÍøµÇ¼

Ôõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

Ôõôµ÷ÊÔreactÔ´Â룿ÏÂÃ汾ƪÎÄÕ´ø¸÷ÈËÁÄÁĶàÖÖ¹¤¾ßϵĵ÷ÊÔreactÔ´ÂëµÄÒªÁ죬ÏÈÈÝÒ»ÏÂÔÚТ˳Õß¡¢create-react-app¡¢viteÏîÄ¿ÖÐÔõÑùdebugger reactµÄÕæʵԴÂ룬ϣÍû¶Ô¸÷ÈËÓÐËù×ÊÖú£¡

clone React

½«Reactcloneµ½ÍâµØ£¬²¢×°ÖÃÒÀÀµ.

git clone https://github.com/facebook/react.git

µÇ¼ºó¸´ÖÆ

±àÒëÏîÄ¿

ÈôÊÇÖ»ÊÇͨ¹ý¼òÆÓµÄyarn build£¬²¢²»»áÌìÉúsourcemap, Õâ²»ÊÇÎÒÃÇÏëÒªµÄ£¬ÎÒÃÇÐèÒª±àÒë·ºÆð´ú±à¼­Æ÷ËùÐèµÄsourcemap¾ÙÐÐÓ³Éäµ½ÏÖʵԴÂë¾ÙÐе÷ÊÔ¡£

Ä¿½ñreactÏîÄ¿²¢ÎÞ·¨Í¨¹ý¼òÆÓÔöÌí²ÎÊýÌìÉúsourcemap£¬ÎÒÃÇÐèÒªÐÞ¸Äscripts/rollup/build.jsϵIJ¿·ÖÉèÖà ¡¾ÍƼöѧϰ£ºvscode½Ì³Ì¡¢±à³Ì½Ìѧ¡¿

¢Ù: ÐÞ¸Ä sourcemap Ϊ true¢Ú£º×¢ÊͲ¿·ÖÎÞ·¨ÌìÉúsourcemapµÄ²å¼þ

ok£¬¿´ÆðÀ´Ðí¶à£¬µ«×Åʵ´óÖ¶¼Á¬ÔÚÒ»Æð(353-355, 387-415), ×¢Ê͵ôÁ˼¸¸ö²å¼þ£¬´ËʱÎÒÃÇ¿ÉÒÔ¾ÙÐÐbuildÁË

yarn build

µÇ¼ºó¸´ÖÆ

×¢ÖØ: ÈôÊÇbuildʧ°Ü£¬ÌáÐÑÄãÐèҪװÖÃjdk£¬Æ¾Ö¤±¨´í×°Öü´¿É¡£

ÀÖЧ¹û¹ûÈçÏ£º

Ôõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

¾ÙÐÐdebugger

ÎÒÃÇƾ֤¹Ù·½ÎĵµµÃÖª»ù´¡¿ª·¢ÎļþĿ¼ÔÚ /fixtures/packaging/babel-standalone/dev.htmlÖУ¬ÓÚÊÇÎÒÃÇƾ֤¸ÃhtmlÏȾÙÐмòÆÓµÄdebugÉèÖá£

vscode

1¡¢½¨ÉèÒ»¸ölaunch.jsonÔõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

2¡¢ÐÞ¸Älaunch.jsonÉèÖÃ

{
  // ʹÓà IntelliSense Ïà֪Ȥ¹ØÊôÐÔ¡£ 
  // ÐüÍ£ÒÔÉó²éÏÖÓÐÊôÐÔµÄÐÎò¡£
  // ÓûÏàʶ¸ü¶àÐÅÏ¢£¬Çë»á¼û: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Open dev.html",
      // ÕâÀï·¾¶¿ÉÄÜ·×ÆçÑù ×öͳһµ÷½â ÐÞ¸ÄΪÈçÏÂ
      "file": "${workspaceFolder}/fixtures/packaging/babel-standalone/dev.html"
    }
  ]
}

µÇ¼ºó¸´ÖÆ

È»ºóÔÚÔ´Âë´òÉ϶ϵ㣬µã»÷·­¿ªdebug¼´¿É¿´µ½ÔËÐе½Ô´ÂëÀÖ³É.

×¢ÖØ£º´ËʱÎÒÃÇÒѾ­ÓÐÁËsourcemap£¬Ö±½ÓÔÚ/packages/react-dom»òÕß/packages/react»áÔËÐе½´úÂë´òÉ϶ϵã

Ôõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

webstrom

webstromµÄÊ®·Ö¼òÆÓ£¬ÔÚdev.htmlÓÒ¼ü¾ÙÐе÷ÊÔdev.html¼´¿É:Ôõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

ÈçÉÏÃæµÄ°¸ÀýÒѾ­Öª×ãÄãµÄ´ó²¿·ÖµÄÔ´Âëµ÷ÊÔÐèÇ󣬲¢ÇÒÎÒÃÇÒ²¿ÉÒÔͨ¹ýÔöÌíһЩ×é¼þ»òÕßhookÀ´¾ÙÐе÷ÊÔ:

Ôõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

ÈôÊÇÄã×ÅʵÏëÔÚÕæʵÏîÄ¿ÖоÙÐÐÔ´ÂëÔĶÁ£¬¿ÉÒÔ¼ÌÐøÍùÏÂÔĶÁ¡£

ÔÚcreate-react-appÖÐdebug

ÎÒÃÇƽʱ´ó¶à¶¼»ùÓÚcreate-react-app»òÕßviteÀ´ÔËÐÐÏîÄ¿£¬ÎÒÃÇ¿ÉÒÔͨ¹ýnpm linkÀ´¾ÙÐжÔÔ´ÂëµÄÁ´½Ó¡£

ÉÏÃæµÄ°¸ÀýÊʺÏreact¿ª·¢ÕßʹÓò¢ÇÒÒѾ­Öª×ãÄãµÄС²¿·ÖÐèÇ󣬿ÉÊÇÎÒÃÇƽʱ´ó¶à¶¼»ùÓÚcreate-react-app»òÕßviteÀ´ÔËÐÐÏîÄ¿£¬ÎÒÃÇ¿ÉÒÔͨ¹ýnpm linkÀ´Á´½Óһϼ´¿É¡£

¢Ù: ½¨ÉèÒ»¸öcreate-react-appÏîÄ¿

¢Ú: ÔÚReactÏîÄ¿Öн« react,react-domÁ´½Óµ½È«¾Ö.

×¢ÖØ: ÐèҪƾ֤ÄãÏÖʵĿ½ñ´¦ÓÚµÄλÖÃÈ¥Ö´ÐУ¬×ܶøÑÔÖ®¾ÍÊǵ½build/node_modules/reactºÍbuild/node_modules/react-dom»®·ÖÖ´ÐÐnpm link¾ÍÐÐÀ².

cd build/node_modules/react && npm link

µÇ¼ºó¸´ÖÆ

ÈçϾÍÀÖ³ÉÁËÒ»¸ö:Ôõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

ÔÙ°Ñreact-domÒ²link°É.

cd .. && cd react-dom && npm link

µÇ¼ºó¸´ÖÆ

Ôõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

¢Û: ÔÚcreate-react-appµÄÏîÄ¿ÖÐlink reactÓëreact-dom

 npm link react react-dom

µÇ¼ºó¸´ÖÆ

´ó¹¦Ð¡³É£¬½ÓÏÂÀ´×îÏÈÕýʽµÄdebugger.

vscodeÔõÑùdebugger

¹Ù·½ÒѾ­¸ø³ö²¿·ÖÎĵµ, ²Î¿¼Îĵµ: Îĵµ

ÏÈÆô¶¯ÏîÄ¿ yarn start

ÔöÌílaunch.jsonÉèÖÃ: Îĵµ

Ôõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

×¢ÖØ:

1¡¢ÈôÊÇÄãÏîÄ¿¶Ë¿Ú¾ÙÐÐÁËÐ޸ģ¬ÐèÒª°ÑÉÏ·½µÄ¶Ë¿ÚÒ²×öÐÞ¸Ä.

2¡¢¹Ù·½ÌṩµÄÊÇedgeä¯ÀÀÆ÷£¬ÈôÊÇÄãÏë¸Ä¹È¸èä¯ÀÀÆ÷Ö»ÐèÒª°ÑtypeÐÞ¸ÄΪchrome

±ÊÕßµÄÉèÖÃÈçÏÂ:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "µ÷ÊÔcreat-react-appÔ´Âë",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

µÇ¼ºó¸´ÖÆ

ÕÒ¸öλÖôòÉ϶ϵã¾ÙÐе÷ÊÔÔõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ¢Û¡¢¢ÜΪÎÒ´òÉ϶ϵãµÄλÖ㬵ã»÷ ¢Ý ¼´¿É¿´µ½½øÈëÔ´ÂëÀ²(¿ÉÄÜÒª¶àµã¼¸ÏÂ)Ôõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

ÖÁ´Ë£ºÎÒÃÇÒѾ­´ó¹¦¸æ³É£¬¿ÉÒÔ¾ÙÐÐÔ´Âëµ÷ÊÔ¡£

webstromÔõÑùdebugger

webstorm¾ÍÏÔµÃÊ®·Ö¼òÆÓ£¬²Î¿¼¹Ù·½Îĵµ: Îĵµ

´òÉ϶ϵã

Æô¶¯ÏîÄ¿ yarn start

ʹÓð´¼ü·­¿ªµ÷ÊÔÃæ°å, ÎĵµÔõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

µ÷ÊÔReact viteÏîÄ¿

ºÍÉÏ·½Ò»Ö£¬Ò²ÊÇͨ¹ýlink

×ܽ᣺

µ÷ÊÔÔ´ÂëµÄÂß¼­½¹µãÔÚÓÚsourcemap£¬¿ÉÊÇÎÒÃDz»ÄÑ·¢Ã÷ÆäÖб£´æһЩÎÊÌâ:

1¡¢Ä¿½ñÎÒÃÇ¿çÏîÄ¿¾ÙÐе÷ÊÔ£¨Ô´ÂëÔÚreactÏîÄ¿ÖУ¬ÎÒÃǵÄÏîÄ¿ÔÚÁíÍâÒ»¸öÎļþÖУ©£¬µ¼ÖÂÀàÐÍÖÎÀí·ºÆðÎÊÌâ, ÕâÊÇ»ùÓÚ¿ª·¢ÏîÄ¿µÄ½ç˵ÖÎÀí£¬²î±ð±à¼­Æ÷ÌåÏÖ²î±ð.

vscodeÔõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝÕâÊÇÓÉÓÚvscodeĬÈÏÆÊÎötsµÄ£¬¿ÉÊDz»»áĬÊìϤ±ðflowµÄÓï·¨£¬ÒÔÊÇÕâÖֵĴúÂë»áÆÊÎö³ÉtsÓï·¨£¬¾Í»á±¨´í£¬ÎÒÃÇÔÚÏîÄ¿ÔöÌí .vscode/settings.json ÔöÌíÉèÖÃ:

{
  "javascript.validate.enable": false
}

µÇ¼ºó¸´ÖÆ

¼´ÌåÏÖÕý³££¬²»ÔÙ±¨´í:Ôõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

webstorm

webstromÔòÊÇÎÞ·¨ÕÒµ½½ç˵Ôõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈÝ

¸ü¶à¹ØÓÚVSCodeµÄÏà¹Ø֪ʶ£¬Çë»á¼û£ºvscode»ù´¡½Ì³Ì£¡

ÒÔÉϾÍÊÇÔõôµ÷ÊÔReactÔ´Â룿¶àÖÖ¹¤¾ßϵĵ÷ÊÔÒªÁìÏÈÈݵÄÏêϸÄÚÈÝ£¬¸ü¶àÇë¹Ø×¢±¾ÍøÄÚÆäËüÏà¹ØÎÄÕ£¡

ÃâÔð˵Ã÷£ºÒÔÉÏչʾÄÚÈÝȪԴÓÚÏàÖúýÌå¡¢ÆóÒµ»ú¹¹¡¢ÍøÓÑÌṩ»òÍøÂçÍøÂçÕûÀí£¬°æȨÕùÒéÓë±¾Õ¾Î޹أ¬ÎÄÕÂÉæ¼°¿´·¨Óë¿´·¨²»´ú±í×ðÁú¿­Ê±¹ÙÍøµÇ¼ÂËÓÍ»úÍø¹Ù·½Ì¬¶È£¬Çë¶ÁÕß½ö×ö²Î¿¼¡£±¾ÎĽӴýתÔØ£¬×ªÔØÇë˵Ã÷À´ÓÉ¡£ÈôÄúÒÔΪ±¾ÎÄÇÖÕ¼ÁËÄúµÄ°æȨÐÅÏ¢£¬»òÄú·¢Ã÷¸ÃÄÚÈÝÓÐÈκÎÉæ¼°ÓÐÎ¥¹«µÂ¡¢Ã°·¸Ö´·¨µÈÎ¥·¨ÐÅÏ¢£¬ÇëÄúÁ¬Ã¦ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼ʵʱÐÞÕý»òɾ³ý¡£

Ïà¹ØÐÂÎÅ

ÁªÏµ×ðÁú¿­Ê±¹ÙÍøµÇ¼

18523999891

¿É΢ÐÅÔÚÏß×Éѯ

ÊÂÇéʱ¼ä£ºÖÜÒ»ÖÁÖÜÎ壬9:30-18:30£¬½ÚãåÈÕÐÝÏ¢

QR code
ÍøÕ¾µØͼ