{"id":262951,"date":"2015-08-05T13:05:02","date_gmt":"2015-08-05T09:05:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=262951"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=262951","title":{"rendered":"\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043b\u044f Browserify"},"content":{"rendered":"<p>     \t<img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/c87\/23f\/844\/c8723f8440c4442a8738891cde859f37.jpg\"\/><\/p>\n<p>  \u0412\u0441\u0435\u043c \u0434\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a!<br \/>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e DX (Developer Experience) \u0438\u043b\u0438 \u00ab\u041e\u043f\u044b\u0442\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438\u00bb, \u0430 \u0435\u0441\u043b\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0435\u0435 \u2014 \u043e\u0431 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u0434\u0430 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u0415\u0441\u043b\u0438 \u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u0432\u0430\u0441 \u0432 \u043d\u043e\u0432\u0438\u043d\u043a\u0443, \u0442\u043e \u043f\u0435\u0440\u0435\u0434 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0432\u0438\u0434\u0435\u043e:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0420\u044f\u0434 \u0432\u0438\u0434\u0435\u043e \u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u0434\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/b><\/p>\n<div class=\"spoiler_text\"><iframe loading=\"lazy\" width=\"560\" height=\"349\" src=\"\/\/www.youtube.com\/embed\/zHPtvw8c3Lc?wmode=opaque\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>  <iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/100010922\" width=\"500\" height=\"281\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><br \/>  <iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/123513496\" width=\"500\" height=\"281\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe>  <\/div>\n<\/div>\n<p>  <\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435: \u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442?<\/h2>\n<p>  \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043f\u043e\u0434 \u0441\u043e\u0431\u043e\u0439 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0440\u044f\u0434\u0430 \u0437\u0430\u0434\u0430\u0447:<br \/>   \u2014 \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0444\u0430\u0439\u043b\u043e\u0432<br \/>   \u2014 \u0412\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u0442\u0447\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0444\u0430\u0439\u043b\u043e\u0432<br \/>   \u2014 \u0422\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043f\u0430\u0442\u0447\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 (\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440)<br \/>   \u2014 \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u0430\u0442\u0447\u0430 \u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c\u0443 \u043a\u043e\u0434\u0443<br \/>  \u041d\u043e \u043e\u0431\u043e \u0432\u0441\u0451\u043c \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2>\u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0444\u0430\u0439\u043b\u043e\u0432<\/h2>\n<p>  \u041d\u0430 \u0441\u0432\u043e\u0451\u043c \u043e\u043f\u044b\u0442\u0435 \u044f \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0447\u0435\u0442\u044b\u0440\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438: <br \/>   \u2014 <a href=\"https:\/\/github.com\/atom\/node-pathwatcher\">\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u0442 github<\/a><br \/>   \u2014 \u041d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 <a href=\"https:\/\/nodejs.org\/docs\/latest\/api\/fs.html#fs_fs_watch_filename_options_listener\">fs.watch<\/a><br \/>   \u2014 <a href=\"https:\/\/github.com\/paulmillr\/chokidar\">Chokidar<\/a><br \/>   \u2014 <a href=\"https:\/\/github.com\/shama\/gaze\">Gaze<\/a><br \/>  \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u043b\u0433\u043e \u0441\u043f\u043e\u0440\u0438\u0442\u044c \u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u0445 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0434 \u0434\u0440\u0443\u0433\u0438\u043c, \u043d\u043e \u043b\u0438\u0447\u043d\u043e \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u044f \u0432\u044b\u0431\u0440\u0430\u043b chokidar \u2014 \u0431\u044b\u0441\u0442\u0440\u043e, \u0443\u0434\u043e\u0431\u043d\u043e, \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 OS X (\u0441\u043f\u0430\u0441\u0438\u0431\u043e,  <a href=\"http:\/\/habrahabr.ru\/users\/paulmillr\/\" class=\"user_link\">paulmillr<\/a>).<\/p>\n<p>  \u041d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u0448\u0430\u0433\u0435 \u2014 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f bundle-\u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u043d\u043d\u044b\u0445. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u0442\u044c \u043e\u0434\u043d\u0430 \u0437\u0430\u0433\u0432\u043e\u0437\u0434\u043a\u0430: browserify \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 bundle-\u0444\u0430\u0439\u043b \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>&quot;change&quot;<\/code> \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0434\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0438 (\u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0435\u0442). \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u0430\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439 \u0441 \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u043c \u043f\u0430\u0442\u0447\u0435\u043c, \u043d\u0430\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c <a href=\"https:\/\/github.com\/Kureev\/browserify-patch-server\/blob\/master\/index.js#L89\">\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0430<\/a> (\u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u0444\u0430\u0439\u043b\u0435 \u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438). \u0421 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u0432\u0440\u043e\u0434\u0435 \u0431\u044b \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u044f\u0441\u043d\u043e. \u041d\u0443 \u0447\u0442\u043e, \u0434\u0432\u0438\u0436\u0435\u043c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435?<\/p>\n<h2>\u0412\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u0442\u0447\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0444\u0430\u0439\u043b\u043e\u0432<\/h2>\n<p>  \u041c\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e bundle-\u0444\u0430\u0439\u043b\u043e\u0432. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u043f\u0430\u0442\u0447 \u043a \u0441\u0442\u0430\u0440\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 react-\u043a\u043e\u0434\u043e\u043c \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043b\u044f browserify \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/milankinen\/livereactload\">livereactload<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0440\u0435\u0448\u0430\u0435\u0442 \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u0434\u0438\u043a\u0438\u043c \u043e\u0432\u0435\u0440\u0445\u0435\u0434\u043e\u043c: \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0432\u0430\u043c \u043f\u0440\u0438\u043b\u0435\u0442\u0430\u0435\u0442 <b>\u0446\u0435\u043b\u044b\u0439<\/b> bundle. \u041a\u0430\u043a \u043f\u043e \u043c\u043d\u0435 \u2014 \u0442\u0430\u043a \u044d\u0442\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c. \u0410 \u0432\u0434\u0440\u0443\u0433 \u0443 \u043c\u0435\u043d\u044f \u0431\u0430\u043d\u0434\u043b \u0441 source maps \u0432\u0435\u0441\u0438\u0442 10\u041c\u0431? \u0418\u0437\u0432\u043e\u043b\u0438\u0442\u0435 \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0437\u0430\u043f\u044f\u0442\u043e\u0439 \u0433\u043d\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0442\u0440\u0430\u0444\u0444\u0438\u043a? \u041d\u0443 \u0443\u0436 \u043d\u0435\u0442\u2026<\/p>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 browserify \u043d\u0435 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c <a href=\"https:\/\/github.com\/webpack\/docs\/wiki\/hot-module-replacement-with-webpack\">\u00ab\u0433\u043e\u0440\u044f\u0447\u0435\u0439 \u0437\u0430\u043c\u0435\u043d\u044b \u043c\u043e\u0434\u0443\u043b\u0435\u0439\u00bb<\/a> \u043a\u0430\u043a \u0432 <a href=\"http:\/\/webpack.github.io\/\">webpack<\/a>, \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u00ab\u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c\u00bb \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430 \u0432 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0435. \u041d\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u0442\u043e \u0434\u0430\u0436\u0435 \u0438 \u043a \u043b\u0443\u0447\u0448\u0435\u043c\u0443, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0431\u044b\u0442\u044c \u0435\u0449\u0451 \u0445\u0438\u0442\u0440\u0435\u0435!<\/p>\n<p>  <a href=\"https:\/\/github.com\/kpdecker\/jsdiff\">Viva jsdiff<\/a>! \u0421\u043a\u0430\u0440\u043c\u043b\u0438\u0432\u0430\u0435\u043c \u0435\u043c\u0443 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u2014 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 diff, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043f\u0440\u0438 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 (\u043b\u0438\u0447\u043d\u043e \u044f \u0436\u043c\u0443 cmd + s \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0447\u0438\u0445) \u0432\u0435\u0441\u0438\u0442 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 1\u041a\u0431. \u0410 \u0447\u0442\u043e \u0435\u0449\u0451 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u044f\u0442\u043d\u043e \u2014 \u043e\u043d \u0447\u0438\u0442\u0430\u0435\u043c! <a href=\"https:\/\/youtu.be\/pZGaye3STsk?t=55s\">\u041d\u043e \u0432\u0441\u0435\u043c\u0443 \u0441\u0432\u043e\u0451 \u0432\u0440\u0435\u043c\u044f<\/a>. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0434\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u044d\u0442\u043e\u0442 diff \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442.<\/p>\n<h2>\u0422\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043f\u0430\u0442\u0447\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442<\/h2>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043d\u0435 \u043f\u0440\u0435\u0434\u0432\u0438\u0434\u0438\u0442\u0441\u044f \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043c\u0430\u0433\u0438\u0438: \u043e\u0431\u044b\u0447\u043d\u043e\u0435 WebSocket \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f:<\/p>\n<p>   \u2014 \u0415\u0441\u043b\u0438 \u0432\u0441\u0451 \u043f\u0440\u043e\u0448\u043b\u043e \u0445\u043e\u0440\u043e\u0448\u043e, diff \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d \u0438 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u043e, \u0442\u043e \u043e\u0442\u0441\u044b\u043b\u0430\u0435\u043c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u0430  <\/p>\n<pre><code class=\"javascript\">{   &quot;bundle&quot;: BundleName &lt;String&gt;, \/\/ \u0421\u0442\u0440\u043e\u043a\u0430 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u043e\u0433\u043e bundle-\u0444\u0430\u0439\u043b\u0430   &quot;patch&quot;: Patch &lt;String&gt; \/\/ \u0421\u0442\u0440\u043e\u043a\u0430 \u0441 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u043c \u043f\u0430\u0442\u0447\u0435\u043c } <\/code><\/pre>\n<p>   \u2014 \u0415\u0441\u043b\u0438 \u0432\u0441\u0451 \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a \u0433\u043b\u0430\u0434\u043a\u043e \u0438 \u043f\u0440\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0438 diff&#8217;\u0430 \u0431\u044b\u043b\u0430 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430:  <\/p>\n<pre><code class=\"javascript\">{   &quot;bundle&quot;: BundleName &lt;String&gt;, \/\/ \u0421\u0442\u0440\u043e\u043a\u0430 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c bundle-\u0444\u0430\u0439\u043b\u0430, \u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430   &quot;error&quot;: Error &lt;String&gt; \/\/ \u0421\u0442\u0440\u043e\u043a\u0430 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439 } <\/code><\/pre>\n<p>   \u2014 \u041a\u043e\u0433\u0434\u0430 \u043d\u043e\u0432\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u0442\u0441\u044f \u043a \u0441\u0435\u0441\u0441\u0438\u0438, \u0435\u043c\u0443 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u00ab\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438\u00bb, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c:  <\/p>\n<pre><code class=\"javascript\">{   &quot;message&quot;: &quot;Connected to browserify-patch-server&quot;,   &quot;sources&quot;: sources &lt;Array&gt;, \/\/ \u041c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 bundle-\u0444\u0430\u0439\u043b\u043e\u0432 } <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/github.com\/Kureev\/browserify-patch-server\">\u0442\u0443\u0442<\/a>.<\/p>\n<h2>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u0430\u0442\u0447\u0430 \u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c\u0443 \u043a\u043e\u0434\u0443<\/h2>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043c\u0430\u0433\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u044d\u0442\u043e\u043c \u0448\u0430\u0433\u0435. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043f\u0430\u0442\u0447, \u043e\u043d \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0435\u043d \u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u043a\u043e\u0434\u0443. \u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<br \/>  \u0410 \u0434\u0430\u043b\u044c\u0448\u0435 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043b\u0438\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a browserify \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b. \u0427\u0435\u0441\u0442\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c, \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 <a href=\"http:\/\/benclinkinbeard.com\/posts\/how-browserify-works\/\">\u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e<\/a> \u0411\u0435\u043d\u0430 \u041a\u043b\u0438\u043d\u043a\u0435\u043d\u0431\u0438\u0440\u0434\u0430, \u043d\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u044f, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0443 \u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u043d\u0430 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f. \u0421\u0430\u043c\u043e\u0435 \u0432\u0430\u0436\u043d\u043e\u0435 \u2014 \u044d\u0442\u043e \u0442\u043e DI \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043a\u043e\u0443\u043f \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">{   1: [function (require, module, exports) {     module.exports = 'DEP';    }, {}],   2: [function (require, module, exports) {     require('.\/dep');      module.exports = 'ENTRY';    }, {&quot;.\/dep&quot;: 1}] } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>require<\/code> \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c <code>module<\/code> \u0438 <code>exports<\/code>. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e <code>require<\/code> \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e: \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0430\u0442\u0447\u0435\u043c (\u043c\u044b \u0432\u0435\u0434\u044c \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u044d\u0442\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435)! \u0421\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439, \u0441\u043f\u043e\u0441\u043e\u0431 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u2014 \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0437\u0438\u0442\u044c <code>require<\/code>. \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u044f \u0438 \u0434\u0435\u043b\u0430\u044e <a href=\"https:\/\/github.com\/Kureev\/browserify-react-live\/blob\/master\/src\/overrideRequire.js\">\u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435<\/a>:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">overrideRequire.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">function isReloadable(name) {   \/\/ @todo Replace this sketch by normal one   return name.indexOf('react') === -1; }  module.exports = function makeOverrideRequire(scope, req) {   return function overrideRequire(name) {     if (!isReloadable(name)) {       if (name === 'react') {         return scope.React;       } else if (name === 'react-dom') {         return scope.ReactDOM;       }     } else {       scope.modules = scope.modules || {};       scope.modules[name] = req(name);        return scope.modules[name];     }   }; }; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041a\u0430\u043a \u0432\u044b, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0432 \u043a\u043e\u0434\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>scope<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0448\u0435 \u043f\u043e \u0441\u0442\u0435\u043a\u0443 \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 <code>window<\/code>. \u0422\u0430\u043a \u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>makeOverrideRequire<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <code>req<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0438\u0447\u0435\u043c \u0438\u043d\u044b\u043c, \u043a\u0430\u043a \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 <code>require<\/code> \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439. \u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c, \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 scope.modules, \u0434\u0430\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a \u043d\u0438\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 (\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044f \u043d\u0430\u0439\u0434\u0443 \u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 \u0431\u0443\u0434\u0443\u044e\u0449\u0435\u043c. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u2014 \u0443\u043f\u0440\u0430\u0437\u0434\u043d\u044e). \u0422\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043a\u043e\u0434\u0430 \u0432\u044b\u0448\u0435, \u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044c <code>react<\/code>&#8216;\u043e\u043c \u0438\u043b\u0438 <code>react-dom<\/code>&#8216;\u043e\u043c. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0437 \u0441\u043a\u043e\u0443\u043f\u0430 (\u0435\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 React, \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043d\u0430\u0441 \u043a \u043e\u0448\u0438\u0431\u043a\u0430\u043c \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 hot-loader-api, \u0442.\u043a. \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0439 <code>getRootInstances<\/code> \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442).<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0438\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435 \u2014 <a href=\"https:\/\/github.com\/Kureev\/browserify-react-live\/blob\/master\/src\/injectWebSocket.js\">\u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0441\u043e\u043a\u0435\u0442\u043e\u043c<\/a>:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">injectWebSocket.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">var moment = require('moment'); var Logdown = require('logdown'); var diff = require('diff');  var system = new Logdown({ prefix: '[BDS:SYSTEM]', }); var error = new Logdown({ prefix: '[BDS:ERROR]', }); var message = new Logdown({ prefix: '[BDS:MSG]', }); var size = 0; var port = 8081; var patched; var timestamp; var data;  \/**  * Convert bytes to kb + round it to xx.xx mask  * @param  {Number} bytes  * @return {Number}  *\/ function bytesToKb(bytes) {   return Math.round((bytes \/ 1024) * 100) \/ 100; }  module.exports = function injectWebSocket(scope, options) {   if (scope.ws) return;    if (options.port) port = options.port;   scope.ws = new WebSocket('ws:\/\/localhost:' + port);    scope.ws.onmessage = function onMessage(res) {     timestamp = '['+ moment().format('HH:mm:ss') + ']';     data = JSON.parse(res.data);      \/**      * Check for errors      * @param  {String} data.error      *\/     if (data.error) {       var errObj = data.error.match(\/console.error\\(&quot;(.+)&quot;\\)\/)[1].split(': ');       var errType = errObj[0];       var errFile = errObj[1];       var errMsg = errObj[2].match(\/(.+) while parsing file\/)[1];        error.error(timestamp + ' Bundle *' + data.bundle + '* is corrupted:' +         '\\n\\n ' + errFile + '\\n\\t \u26a0 ' + errMsg + '\\n');     }      \/**      * Setup initial bundles      * @param  {String} data.sources      *\/     if (data.sources) {       scope.bundles = data.sources;        scope.bundles.forEach(function iterateBundles(bundle) {         system.log(timestamp + ' Initial bundle size: *' +           bytesToKb(bundle.content.length) + 'kb*');       });     }      \/**      * Apply patch to initial bundle      * @param  {Diff} data.patch      *\/     if (data.patch) {       console.groupCollapsed(timestamp, 'Patch for', data.bundle);       system.log('Received patch for *' +         data.bundle + '* (' + bytesToKb(data.patch.length) + 'kb)');        var source = scope.bundles.filter(function filterBundle(bundle) {         return bundle.file === data.bundle;       })[0].content;        system.log('Patch content:\\n\\n', data.patch, '\\n\\n');        try {         patched = diff.applyPatch(source, data.patch);       } catch (e) {         return error.error('Patch failed. Can\\'t apply last patch to source: ' + e);       }        Function('return ' + patched)();        scope.bundles.forEach(function iterateBundles(bundle) {         if (bundle.file === data.bundle) {           bundle.content = patched;         }       });        system.log('Applied patch to *' + data.bundle + '*');       console.groupEnd();     }      \/**      * Some other info messages      * @param  {String} data.message      *\/     if (data.message) {       message.log(timestamp + ' ' + data.message);     }   }; }; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0412\u0440\u043e\u0434\u0435 \u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0433\u043e: \u0440\u0430\u0437\u0432\u0435 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>diff.applyPatch(source, data.patch)<\/code>. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u043e\u043f\u0430\u0442\u0447\u0435\u043d\u043d\u044b\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0430\u043b\u0435\u0435 \u0432 \u043a\u043e\u0434\u0435 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 <code>Function<\/code>.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435, \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e\u0435 \u2014 <a href=\"https:\/\/github.com\/Kureev\/browserify-react-live\/blob\/master\/src\/injectReactDeps.js\">injectReactDeps.js<\/a>:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">injectReactDeps.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">module.exports = function injectReactDeps(scope) {   scope.React = require('react');   scope.ReactMount = require('react\/lib\/ReactMount');   scope.makeHot = require('react-hot-api')(     function getRootInstances() {       return scope.ReactMount._instancesByReactRootID;     }   ); }; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0432\u0441\u0435\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0431\u044c\u0435\u0442\u0441\u044f \u0441\u0435\u0440\u0434\u0446\u0435 \u0438\u0437 <code>react-hot-api<\/code> \u043e\u0442 <a href=\"https:\/\/twitter.com\/dan_abramov\">\u0414\u0430\u043d\u0438\u0438\u043b\u0430 \u0410\u0431\u0440\u0430\u043c\u043e\u0432\u0430 aka gaearon<\/a>. \u0414\u0430\u043d\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0435\u0442 export&#8217;\u044b \u043d\u0430\u0448\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 (\u0447\u0438\u0442\u0430\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432) \u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043e\u043d\u043d\u044b\u0445 \u043e\u043d\u0430 \u00ab\u043f\u0430\u0442\u0447\u0438\u0442\u00bb \u0438\u0445 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u044b. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0447\u0430\u0441\u044b, \u043d\u043e \u0441 \u0440\u044f\u0434\u043e\u043c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439: \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u00ab\u043f\u0430\u0442\u0447\u0430\u00bb \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u043a\u043e\u0443\u043f\u0430, \u043e\u0442\u043e\u0440\u0432\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 react \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0443\u0442 \u0443\u0442\u0435\u0440\u044f\u043d\u044b. \u0422\u0430\u043a \u0436\u0435 \u0435\u0441\u0442\u044c \u0440\u044f\u0434 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0439 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u043e state&#8217;\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432: \u043d\u0435\u043b\u044c\u0437\u044f \u043c\u0435\u043d\u044f\u0442\u044c \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u2014 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430.<\/p>\n<p>  \u041d\u0443 \u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u043d\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0451 \u044d\u0442\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u0435\u0434\u0438\u043d\u043e \u0444\u0430\u0439\u043b\u043e\u0432 <a href=\"https:\/\/github.com\/Kureev\/browserify-react-live\/blob\/master\/src\/transform.js\">transform.js<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 browserify transform, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u043e\u043f\u043b\u043e\u0442\u0438\u0442\u044c \u0432\u0441\u044e \u0437\u0430\u0434\u0443\u043c\u043a\u0443 \u0432 \u0436\u0438\u0437\u043d\u044c \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u044f \u0441\u0432\u044f\u0437\u0443\u044e\u0449\u0438\u043c \u0437\u0432\u0435\u043d\u043e\u043c \u043c\u0435\u0436\u0434\u0443 \u0432\u0441\u0435\u043c\u0438 \u0432\u044b\u0448\u0435\u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">transform.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">const through = require('through2'); const pjson = require('..\/package.json');  \/**  * Resolve path to library file  * @param  {String} file  * @return {String}  *\/ function pathTo(file) {   return pjson.name + '\/src\/' + file; }  \/**  * Initialize react live patch  * @description Inject React & WS, create namespace  * @param  {Object} options  * @return {String}  *\/ function initialize(options) {   return '\\n' +     'const options = JSON.parse(\\'' + JSON.stringify(options) + '\\');\\n' +     'const scope = window.__hmr = (window.__hmr || {});\\n' +     '(function() {\\n' +       'if (typeof window === \\'undefined\\') return;\\n' +       'if (!scope.initialized) {\\n' +         'require(&quot;' + pathTo('injectReactDeps') + '&quot;)(scope, options);\\n' +         'require(&quot;' + pathTo('injectWebSocket') + '&quot;)(scope, options);' +         'scope.initialized = true;\\n' +       '}\\n' +     '})();\\n'; }  \/**  * Override require to proxy react\/component require  * @return {String}  *\/ function overrideRequire() {   return '\\n' +     'require = require(&quot;' + pathTo('overrideRequire') + '&quot;)' +     '(scope, require);'; }  \/**  * Decorate every component module by `react-hot-api` makeHot method  * @return {String}  *\/ function overrideExports() {   return '\\n' +     ';(function() {\\n' +       'if (module.exports.name || module.exports.displayName) {\\n' +         'module.exports = scope.makeHot(module.exports);\\n' +       '}\\n' +     '})();\\n'; }  module.exports = function applyReactHotAPI(file, options) {   var content = [];    return through(     function transform(part, enc, next) {       content.push(part);       next();     },      function finish(done) {       content = content.join('');       const bundle = initialize(options) +         overrideRequire() +         content +         overrideExports();        this.push(bundle);       done();     }   ); }; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<h2>\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>  \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0447\u0430\u0441\u0442\u0435\u0439: <a href=\"https:\/\/github.com\/Kureev\/browserify-patch-server\">\u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/a> \u0438 <a href=\"https:\/\/github.com\/Kureev\/browserify-react-live\">\u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/a>:<\/p>\n<p>   \u2014 \u0421\u0435\u0440\u0432\u0435\u0440 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u043e\u043b\u044c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f \u0437\u0430 bundle-\u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 diff \u043c\u0435\u0436\u0434\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u043c\u0438 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438, \u043e \u0447\u0451\u043c \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043e\u043f\u043e\u0432\u0435\u0449\u0430\u0435\u0442 \u0432\u0441\u0435\u0445 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432. \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u0435\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 <a href=\"https:\/\/github.com\/Kureev\/browserify-patch-server\">\u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0437\u0434\u0435\u0441\u044c<\/a>.<br \/>  \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u044e live-patch \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438\/\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>   \u2014 \u041a\u043b\u0438\u0435\u043d\u0442 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u044d\u0442\u043e \u0432\u0441\u0442\u0440\u0430\u0435\u0432\u0430\u0435\u043c\u0430\u044f \u0447\u0435\u0440\u0435\u0437 transform \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043f\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c WebSockets \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f (\u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u0430\u0442\u0447 \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 bundle). \u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0443 <a href=\"https:\/\/github.com\/Kureev\/browserify-react-live\">\u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0442\u0443\u0442<\/a>.<\/p>\n<h2>\u0414\u0430\u0439\u0442\u0435 \u043f\u043e\u0442\u0440\u043e\u0433\u0430\u0442\u044c<\/h2>\n<p>  \u0412 Unix\/OS X \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438 \u0434\u043b\u044f \u0441\u043a\u0430\u0444\u0444\u043e\u043b\u0434\u0438\u043d\u0433\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/p>\n<pre><code class=\"bash\">git clone https:\/\/github.com\/Kureev\/browserify-react-live.git cd browserify-react-live\/examples\/01\\ -\\ Basic npm i && npm start <\/code><\/pre>\n<p>  \u0412 Windows, \u043f\u043e\u043b\u0430\u0433\u0430\u044e, \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443 (\u043c\u043e\u0440\u043e\u043a\u0430 \u0441\u043e \u0441\u043b\u044d\u0448\u0430\u043c\u0438), \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0435\u0441\u043b\u0438 \u043a\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u0442 \u0438 \u043d\u0430\u043f\u0438\u0448\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u044d\u0442\u0438\u0445 3 \u043a\u043e\u043c\u0430\u043d\u0434, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0435<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/448\/4d6\/c50\/4484d6c50a424d45b76fe33d7852f0ad.png\"\/><\/p>\n<p>  \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0440\u0430\u0434\u043e\u0441\u0442\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0438\u0442 \u0432\u0430\u043c, \u0447\u0442\u043e \u0432\u0441\u0451 \u0433\u043e\u0442\u043e\u0432\u043e, \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u0435 \u043d\u0430 <a href=\"http:\/\/localhost:8080\">http:\/\/localhost:8080<\/a><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/86d\/f7e\/5dd\/86df7e5ddbd54bebb1bcd243199ea2a3.png\"\/><\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0435\u043b\u043e \u0437\u0430 \u0432\u0430\u043c\u0438: \u0438\u0434\u0435\u043c \u0432 browserify-react-live\/examples\/01 \u2014 Basic\/components\/MyComponent.js \u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u043a\u043e\u0434.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043a\u043b\u0438\u043a\u0430\u0432 \u043f\u0430\u0440\u0443 \u0440\u0430\u0437 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u00abIncrease\u00bb, \u044f \u0440\u0435\u0448\u0438\u043b, \u0447\u0442\u043e +1 \u2014 \u044d\u0442\u043e \u0434\u043b\u044f \u0441\u043b\u0430\u0431\u0430\u043a\u043e\u0432 \u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u043b \u0432 \u043a\u043e\u0434\u0435<\/p>\n<pre><code class=\"javascript\">this.setState({ counter: this.state.counter + 1 });<\/code><\/pre>\n<p>  \u043d\u0430<\/p>\n<pre><code class=\"javascript\">this.setState({ counter: this.state.counter + 2 });<\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u044f \u0432\u0438\u0436\u0443 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0430\u0442\u0447\u0430:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ba0\/138\/24a\/ba013824a5724c65bd52f02c37cca4f6.jpg\"\/><\/p>\n<p>  \u0413\u043e\u0442\u043e\u0432\u043e! \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430\u0436\u0430\u0442\u044c \u00abIncrease\u00bb \u0435\u0449\u0451 \u0440\u0430\u0437 \u2014 \u043d\u0430\u0448 \u0441\u0447\u0451\u0442\u0447\u0438\u043a \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u0441\u044f \u043d\u0430 2! Profit!<\/p>\n<h2>\u0412\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f<\/h2>\n<p>   \u2014 \u0427\u0435\u0441\u0442\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u044f \u0434\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043d\u0430\u0434\u0435\u044f\u043b\u0441\u044f, \u0447\u0442\u043e livereactload \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0438 \u043c\u043d\u0435 \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u043d\u043e \u043f\u043e\u0441\u043b\u0435 2\u0445 \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u0441 \u0440\u0430\u0437\u043d\u0438\u0446\u0435\u0439 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u044f \u0442\u0430\u043a \u0438 \u043d\u0435 \u0434\u043e\u0431\u0438\u043b\u0441\u044f \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 (\u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0441\u043b\u0435\u0442\u0430\u043b state \u0441\u0438\u0441\u0442\u0435\u043c\u044b).<br \/>   \u2014 \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044f \u0447\u0442\u043e-\u0442\u043e \u0443\u043f\u0443\u0441\u0442\u0438\u043b, \u0438\u043b\u0438 \u0436\u0435 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044e \u2014 \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043c\u043d\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c, \u0432\u043c\u0435\u0441\u0442\u0435 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043c\u0438\u0440 \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u043b\u0443\u0447\u0448\u0435 \ud83d\ude42<br \/>   \u2014 \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0432\u0441\u0435\u043c, \u043a\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u043b \u043c\u043d\u0435 \u0441 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432 \u043f\u043e\u043b\u0435\u0432\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445     \t<\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/264175\/\"> http:\/\/habrahabr.ru\/post\/264175\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>     \t<img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/c87\/23f\/844\/c8723f8440c4442a8738891cde859f37.jpg\"\/><\/p>\n<p>  \u0412\u0441\u0435\u043c \u0434\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a!<br \/>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e DX (Developer Experience) \u0438\u043b\u0438 \u00ab\u041e\u043f\u044b\u0442\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438\u00bb, \u0430 \u0435\u0441\u043b\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0435\u0435 \u2014 \u043e\u0431 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u0434\u0430 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u0415\u0441\u043b\u0438 \u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u0432\u0430\u0441 \u0432 \u043d\u043e\u0432\u0438\u043d\u043a\u0443, \u0442\u043e \u043f\u0435\u0440\u0435\u0434 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0432\u0438\u0434\u0435\u043e:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0420\u044f\u0434 \u0432\u0438\u0434\u0435\u043e \u0441 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u0434\u0430 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/b><\/p>\n<div class=\"spoiler_text\"><iframe loading=\"lazy\" width=\"560\" height=\"349\" src=\"\/\/www.youtube.com\/embed\/zHPtvw8c3Lc?wmode=opaque\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>  <iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/100010922\" width=\"500\" height=\"281\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><br \/>  <iframe loading=\"lazy\" src=\"\/\/player.vimeo.com\/video\/123513496\" width=\"500\" height=\"281\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe>  <\/div>\n<\/div>\n<p>  <\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435: \u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442?<\/h2>\n<p>  \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u043f\u043e\u0434 \u0441\u043e\u0431\u043e\u0439 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0440\u044f\u0434\u0430 \u0437\u0430\u0434\u0430\u0447:<br \/>   \u2014 \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0444\u0430\u0439\u043b\u043e\u0432<br \/>   \u2014 \u0412\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u0442\u0447\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0444\u0430\u0439\u043b\u043e\u0432<br \/>   \u2014 \u0422\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043f\u0430\u0442\u0447\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 (\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440)<br \/>   \u2014 \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u0430\u0442\u0447\u0430 \u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c\u0443 \u043a\u043e\u0434\u0443<br \/>  \u041d\u043e \u043e\u0431\u043e \u0432\u0441\u0451\u043c \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-262951","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/262951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=262951"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/262951\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=262951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=262951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=262951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}