{"id":292594,"date":"2019-07-26T09:04:09","date_gmt":"2019-07-26T09:04:09","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=292594"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=292594","title":{"rendered":"\u0421\u0442\u0430\u0440\u0442\u0443\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 React \u0438 TypeScript"},"content":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\">\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/nc\/57\/zc\/nc57zcknvdousryimpgxxqsiz1i.jpeg\" \/><\/div>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0441\u0432\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b, \u044f \u043f\u0438\u0448\u0443 \u0431\u044d\u043a\u0435\u043d\u0434\u044b, \u043d\u043e \u0432\u043e\u0442 \u043d\u0430 \u0434\u043d\u044f\u0445 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0430\u0447\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 React. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434, \u043a\u043e\u0433\u0434\u0430 \u0432\u0435\u0440\u0441\u0438\u044f React \u0431\u044b\u043b\u0430 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439, \u043a\u0430\u043a \u0438 \u043c\u043e\u0439 \u043e\u043f\u044b\u0442 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u044f \u0443\u0436\u0435 \u0434\u0435\u043b\u0430\u043b \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0441\u043d\u0430\u0440\u044f\u0434\u0443 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435\u0443\u043c\u0435\u043b\u043e \u0438 \u043a\u043e\u0440\u044f\u0432\u043e. \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u044f \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0437\u0440\u0435\u043b\u043e\u0441\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b React \u0438 \u043c\u043e\u0439 \u043f\u043e\u0434\u0440\u043e\u0441\u0448\u0438\u0439 \u043e\u043f\u044b\u0442, \u044f \u0432\u043e\u043e\u0434\u0443\u0448\u0435\u0432\u0438\u043b\u0441\u044f \u0443\u0436 \u0432 \u044d\u0442\u043e\u0442-\u0442\u043e \u0440\u0430\u0437 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0451 \u0445\u043e\u0440\u043e\u0448\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u043e. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0434\u043b\u044f \u0431\u0443\u0434\u0443\u0449\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0430 \u0447\u0442\u043e\u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u0431\u044b\u043b\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f-\u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u043c\u043e\u0447\u044c \u0442\u0435\u043c, \u043a\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u0441 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0436\u0435 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p><strong><em>TL\/DR: \u041a\u043e\u0434 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u043a \u0441\u0442\u0430\u0440\u0442\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 <a href=\"https:\/\/github.com\/jmorozov\/react-library-example\">github<\/a><\/em><\/strong><\/p>\n<p>  <\/p>\n<p>\u041a \u0437\u0430\u0434\u0430\u0447\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0442\u0438 \u0441 \u0434\u0432\u0443\u0445 \u0441\u0442\u043e\u0440\u043e\u043d:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041d\u0430\u0439\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 starter-kit, Boilerplate \u0438\u043b\u0438 cli-\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440<\/li>\n<li>\u0421\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0451 \u0441\u0430\u043c\u043e\u043c\u0443<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0445\u043e\u0440\u043e\u0448 \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0441\u0442\u0430\u0440\u0442\u0430, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u043e\u0434\u043e\u0439\u0434\u0451\u0442 \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432, \u043a\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u0441 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0438 \u0432 \u0447\u0451\u043c \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u0431\u0438\u0431\u0438\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412\u043d\u0430\u0447\u0430\u043b\u0435 \u044f \u043f\u043e\u0448\u0451\u043b \u043f\u0435\u0440\u0432\u044b\u043c \u043f\u0443\u0442\u0451\u043c, \u043d\u043e \u0437\u0430\u0442\u0435\u043c \u0440\u0435\u0448\u0438\u043b \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u043f\u0440\u0438\u043a\u0440\u0443\u0442\u0438\u0442\u044c \u0435\u0449\u0451 \u043f\u0430\u0440\u0443 \u043f\u0430\u043a\u0435\u0442\u043e\u0432, \u0438 \u0442\u0443\u0442 \u043f\u043e\u0441\u044b\u043f\u0430\u043b\u0438\u0441\u044c \u0432\u0441\u044f\u043a\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043d\u0435\u0441\u043e\u0441\u0442\u044b\u043a\u043e\u0432\u043a\u0438. \u0412 \u0438\u0442\u043e\u0433\u0435 \u0437\u0430\u043a\u0430\u0442\u0430\u043b \u0440\u0443\u043a\u0430\u0432\u0430 \u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u0432\u0441\u0451 \u0441\u0430\u043c. \u041d\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0442\u0430\u043a\u0438 \u0443\u043f\u043e\u043c\u044f\u043d\u0443.<\/p>\n<p>  <\/p>\n<h2 id=\"create-react-library\">Create React Library<\/h2>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u043b\u0438 \u0434\u0435\u043b\u043e \u0441 React \u0441\u043b\u044b\u0448\u0430\u043b\u0438 \u043f\u0440\u043e \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0441\u0442\u0430\u0440\u0442\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 React, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0432\u0435\u0441\u0442\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0443 \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0443\u043c\u043d\u044b\u0435 \u0434\u0435\u0444\u043e\u043b\u0442\u044b \u2014 <a href=\"https:\/\/github.com\/facebook\/create-react-app\">Create React App<\/a> (CRA). \u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 (<a href=\"https:\/\/habr.com\/ru\/post\/326090\/\">\u0438 \u0435\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0445\u0430\u0431\u0440\u0435<\/a>). \u041e\u0434\u043d\u0430\u043a\u043e, \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 ui-kit \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e SPA. \u041d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (src), \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0434\u043b\u044f \u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 (example), \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 (&quot;\u0432\u0438\u0442\u0440\u0438\u043d\u0430&quot;) \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0441 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043a \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0443 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 (dist). \u0422\u0430\u043a\u0436\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 SPA \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u0431\u0443\u0434\u0443\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0438\u043d\u0434\u0435\u043a\u0441\u043d\u044b\u0439 \u0444\u0430\u0439\u043b. \u041f\u043e\u0434\u0443\u043c\u0430\u0432 \u043e\u0431 \u044d\u0442\u043e\u043c, \u044f \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u043d\u0430 \u043f\u043e\u0438\u0441\u043a\u0438 \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 CRA \u043f\u0430\u043a\u0435\u0442 \u2014 <a href=\"https:\/\/github.com\/transitive-bullshit\/create-react-library\">Creat React Library<\/a> (CRL).<\/p>\n<p>  <\/p>\n<p>CRL, \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0438 CRA, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f &quot;easy-to-use&quot; CLI-\u0443\u0442\u0438\u043b\u0438\u0442\u043e\u0439. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 <a href=\"https:\/\/rollupjs.org\/guide\/en\/\">Rollup<\/a> \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 cjs \u0438 es \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438 source map \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 css-\u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/li>\n<li><a href=\"https:\/\/babeljs.io\/\">babel<\/a> \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0432 ES5<\/li>\n<li><a href=\"https:\/\/jestjs.io\/\">Jest<\/a> \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u043e\u0432<\/li>\n<li>TypeScript (TS) \u043a\u0430\u043a \u043e\u043f\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u0431\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c(<a href=\"https:\/\/medium.com\/devschacht\/introducing-npx-an-npm-package-runner-a72a658cd9e6\">npx<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442\u044b \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e):<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npx create-react-library<\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041e\u0442\u0432\u0435\u0442\u0438\u043c \u043d\u0430 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b<\/b><\/p>\n<div class=\"spoiler_text\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/wd\/ql\/qq\/wdqlqqfmjrgntiqz6zphcdyccdw.png\" alt=\"CLR questions\"\/><\/p>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0418 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0421 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439<\/b><\/p>\n<div class=\"spoiler_text\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vs\/d4\/l2\/vsd4l2o2g1wn3n0folb_yr30ui8.png\" alt=\"CLR tree\"\/><\/p>\n<\/div>\n<\/div>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0410 \u043f\u043e\u0442\u043e\u043c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a&#8230;<\/b><\/p>\n<div class=\"spoiler_text\">\n<p>\u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0438\u0445 \u0432\u0441\u0435\u0445 \u0434\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/www.npmjs.com\/package\/npm-check\">npm-check<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npx npm-check -u<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0449\u0451 \u043e\u0434\u043d\u0438\u043c \u043f\u0435\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0444\u0430\u043a\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>example<\/code> \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 js. \u041f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0440\u0443\u043a\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430 TypeScript, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 <code>tsconfig.json<\/code> \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0430\u043c <code>typescript<\/code> \u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 <code>@types<\/code>).<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0430\u043a\u0435\u0442 <code>react-scripts-ts<\/code> \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d <code>deprecated<\/code> \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u0412\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <code>react-scripts<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0440 CRA (\u0447\u044c\u0438\u043c \u043f\u0430\u043a\u0435\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>react-scripts<\/code>) \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 TypeScript \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043e\u043a\u0438 (\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Babel 7).<\/p>\n<p>  <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u044f \u043d\u0435 \u043e\u0441\u0438\u043b\u0438\u043b \u043d\u0430\u0442\u044f\u0433\u0438\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0430 <code>react-scripts<\/code> \u043d\u0430 \u043c\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435. \u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044f \u043f\u043e\u043c\u043d\u044e, Jest \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b \u043e\u043f\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 <code>isolatedModules<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0448\u043b\u0430 \u0432 \u0440\u0430\u0437\u0440\u0435\u0437 \u0441 \u043c\u043e\u0438\u043c \u0436\u0435\u043b\u0430\u043d\u0438\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>d.ts<\/code> \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 (\u0432\u0441\u0451 \u044d\u0442\u043e \u043a\u0430\u043a-\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f\u043c\u0438 Babel 7, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Jest \u0438 <code>react-scripts<\/code> \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 TS). \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u0434\u0435\u043b\u0430\u043b <code>eject<\/code> \u0434\u043b\u044f <code>react-scripts<\/code>, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u043b \u0432\u0441\u0451 \u0440\u0443\u043a\u0430\u043c\u0438, \u043e \u0447\u0451\u043c \u0438 \u043f\u0438\u0448\u0443 \u0434\u0430\u043b\u0435\u0435.<\/p>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h2 id=\"beryom-upravlenie-v-svoi-ruki\">\u0411\u0435\u0440\u0451\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u0441\u0432\u043e\u0438 \u0440\u0443\u043a\u0438<\/h2>\n<p>  <\/p>\n<p>\u0410 \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u043f\u043e\u0439\u0442\u0438 \u0432\u0442\u043e\u0440\u044b\u043c \u043f\u0443\u0442\u0451\u043c \u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0451 \u0441\u0430\u043c\u043e\u043c\u0443? \u0418\u0442\u0430\u043a, \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u043d\u0430\u0447\u0430\u043b\u0430. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c <code>npm init<\/code> \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c <code>package.json<\/code> \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0443\u0434\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043d\u0430\u0448\u0435\u043c \u043f\u0430\u043a\u0435\u0442\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u043e\u043f\u0438\u0448\u0435\u043c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0434\u043b\u044f node \u0438 npm \u0432 \u043f\u043e\u043b\u0435 <code>engines<\/code>. \u0421\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0438 \u044d\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>dist<\/code>. \u0423\u043a\u0430\u0436\u0435\u043c \u044d\u0442\u043e \u0432 \u043f\u043e\u043b\u0435 <code>files<\/code>. \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 react, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0431\u0443\u0434\u0443\u0442 \u0441\u0442\u043e\u044f\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u2014 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432 \u043f\u043e\u043b\u0435 <code>peerDependencies<\/code> \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 <code>react<\/code> \u0438 <code>react-dom<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u0430\u043a\u0435\u0442\u044b <code>react<\/code> \u0438 <code>react-dom<\/code> \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 types (\u0442.\u043a. \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u043b\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430 TypeScript) \u043a\u0430\u043a devDependencies (\u043a\u0430\u043a \u0438 \u0432\u0441\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435):<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install --save-dev react react-dom @types\/react @types\/react-dom<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c TypeScript:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install --save-dev typescript<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b\u044b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u0442\u0435\u0441\u0442\u043e\u0432: <code>tsconfig.json<\/code> \u0438 <code>tsconfig.test.json<\/code>. \u041d\u0430\u0448 <code>target<\/code> \u0431\u0443\u0434\u0435\u0442 \u0432 <code>es5<\/code>, \u0431\u0443\u0434\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>sourceMap<\/code> \u0438 \u0442.\u0434. \u0421 \u043f\u043e\u043b\u043d\u044b\u043c \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u043e\u043f\u0446\u0438\u0439 \u0438 \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0432 <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/compiler-options.html\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>. \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u0432 <code>include<\/code> \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438, \u0430 \u0432 <code>exclude<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0438 <code>node_modules<\/code> \u0438 <code>dist<\/code>. \u0412 <code>package.json<\/code> \u0443\u043a\u0430\u0436\u0435\u043c \u0432 \u043f\u043e\u043b\u0435 <code>typings<\/code>, \u0433\u0434\u0435 \u0431\u0440\u0430\u0442\u044c \u0442\u0438\u043f\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u2014 <code>dist\/index<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>src<\/code> \u0434\u043b\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u0441\u044f\u043a\u0438\u0435 \u043c\u0435\u043b\u043e\u0447\u0438, \u0432\u0440\u043e\u0434\u0435 <code>.gitignore<\/code>, <code>.editorconfig<\/code>, \u0444\u0430\u0439\u043b\u0430 \u0441 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0435\u0439 \u0438 <code>README.md<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"rollup\">Rollup<\/h3>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Rollup, \u043a\u0430\u043a \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u043b CRL. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0438 \u043a\u043e\u043d\u0444\u0438\u0433, \u044f \u043f\u043e\u0434\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b \u0442\u0430\u043a\u0436\u0435 \u0443 CRL. \u0412\u043e\u043e\u0431\u0449\u0435 \u0441\u043b\u044b\u0448\u0430\u043b \u043c\u043d\u0435\u043d\u0438\u0435, \u0447\u0442\u043e Rollup \u0445\u043e\u0440\u043e\u0448 \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0430 Webpack \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041e\u0434\u043d\u0430\u043a\u043e, \u044f \u043d\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043b Webpack (\u043c\u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 \u043c\u0435\u043d\u044f CRA), \u043d\u043e Rollup \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0445\u043e\u0440\u043e\u0448, \u043f\u0440\u043e\u0441\u0442 \u0438 \u043a\u0440\u0430\u0441\u0438\u0432.<\/p>\n<p>  <\/p>\n<p>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install --save-dev rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-typescript2 rollup-plugin-url @svgr\/rollup<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>package.json<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u043b\u044f \u0441 \u0440\u0430\u0441\u043f\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u0430\u043a \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u043d\u0430\u043c <code>rollup<\/code> \u2014 <a href=\"https:\/\/github.com\/rollup\/rollup\/wiki\/pkg.module\">pkg.module<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"json\">   &quot;main&quot;: &quot;dist\/index.js&quot;,    &quot;module&quot;: &quot;dist\/index.es.js&quot;,    &quot;jsnext:main&quot;: &quot;dist\/index.es.js&quot;<\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b rollup.config.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import typescript from 'rollup-plugin-typescript2'; import commonjs from 'rollup-plugin-commonjs'; import external from 'rollup-plugin-peer-deps-external'; import postcss from 'rollup-plugin-postcss'; import resolve from 'rollup-plugin-node-resolve'; import url from 'rollup-plugin-url'; import svgr from '@svgr\/rollup';  import pkg from '.\/package.json';  export default {    input: 'src\/index.tsx',    output: [       {          file: pkg.main,          format: 'cjs',          exports: 'named',          sourcemap: true       },       {          file: pkg.module,          format: 'es',          exports: 'named',          sourcemap: true       }    ],    plugins: [       external(),       postcss({          modules: false,          extract: true,          minimize: true,          sourceMap: true       }),       url(),       svgr(),       resolve(),       typescript({          rollupCommonJSResolveHack: true,          clean: true       }),       commonjs()    ] };<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 js-\u0444\u0430\u0439\u043b, \u0430 \u0442\u043e\u0447\u043d\u0435\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442. \u0412 \u043f\u043e\u043b\u0435 <code>input<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u044b \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. <code>output<\/code> \u2014 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0448\u0438 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u2014 \u0432 \u043c\u043e\u0434\u0443\u043b\u044c \u043a\u0430\u043a\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043a\u0443\u0434\u0430 \u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0414\u0430\u043b\u0435\u0435 \u0438\u0434\u0451\u0442 \u043f\u043e\u043b\u0435 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432<\/b><\/p>\n<div class=\"spoiler_text\">\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/rollup-plugin-peer-deps-external\">rollup-plugin-peer-deps-external<\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c <code>peerDependencies<\/code> \u0438\u0437 <code>bundle<\/code>, \u0447\u0442\u043e\u0431\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440. \u042d\u0442\u043e \u0440\u0435\u0437\u043e\u043d\u043d\u043e, \u0438\u0431\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435 <code>peerDependencies<\/code> \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/li>\n<li><a href=\"https:\/\/github.com\/egoist\/rollup-plugin-postcss\">rollup-plugin-postcss<\/a> \u2014 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442 <a href=\"https:\/\/github.com\/postcss\/postcss\">PostCss<\/a> \u0438 Rollup. \u0422\u0443\u0442 \u043c\u044b \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c css-modules, \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043d\u0443\u044e \u043f\u043e\u0441\u0442\u0430\u0432\u043a\u0443 \u043e\u0442 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 css, \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 sourceMap. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e css, \u043a\u0440\u043e\u043c\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0442\u043e <code>extract<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u2014 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 css \u0431\u0443\u0434\u0435\u0442 \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0432 \u0442\u0435\u0433 head \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u043c\u043e\u0451\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0435\u0449\u0451 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 css (\u0441\u0435\u0442\u043a\u0430, \u0446\u0432\u0435\u0442\u0430 \u0438 \u0442.\u043f.), \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u044f\u0432\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u0435\u0431\u0435 css-bundle \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/li>\n<li><a href=\"https:\/\/github.com\/rollup\/rollup-plugin-url\">rollup-plugin-url<\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u0432\u0440\u043e\u0434\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a<\/li>\n<li><a href=\"https:\/\/github.com\/smooth-code\/svgr\">svgr<\/a> \u2014 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 svg \u0432 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/li>\n<li><a href=\"https:\/\/github.com\/rollup\/rollup-plugin-node-resolve\">rollup-plugin-node-resolve<\/a> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 node_modules<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/rollup-plugin-typescript2\">rollup-plugin-typescript2<\/a> \u2014 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 TypeScript \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0435\u0433\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438<\/li>\n<li><a href=\"https:\/\/github.com\/rollup\/rollup-plugin-commonjs\">rollup-plugin-commonjs<\/a> \u2014 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 commonjs-\u043c\u043e\u0434\u0443\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0432 es-\u043c\u043e\u0434\u0443\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 bundle<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u043e\u043b\u0435 <code>scripts<\/code> <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 (<code>&quot;build&quot;: &quot;rollup -c&quot;<\/code>) \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 watch-\u0440\u0435\u0436\u0438\u043c\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 (<code>&quot;start&quot;: &quot;rollup -c -w &amp;&amp; npm run prettier-watch&quot;<\/code>).<\/p>\n<p>  <\/p>\n<h3 id=\"pervyy-komponent-i-eksportnyy-fayl\">\u041f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043d\u044b\u0439 \u0444\u0430\u0439\u043b<\/h3>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430\u0448\u0430 \u0441\u0431\u043e\u0440\u043a\u0430. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u2014 <code>src\/components\/ExampleComponent<\/code>. \u0412 \u044d\u0442\u043e\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u044b \u2014 <code>tsx<\/code>, <code>css<\/code>, <code>test.tsx<\/code> \u0438 \u043f\u0440\u043e\u0447.<br \/>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0444\u0430\u0439\u043b \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 <code>tsx<\/code>-\u0444\u0430\u0439\u043b \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">ExampleComponent.tsx<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">\/**  * @class ExampleComponent  *\/  import * as React from 'react';  import '.\/ExampleComponent.css';  export interface Props {    \/**     * Simple text prop     **\/    text: string; }  \/** My First component *\/ export class ExampleComponent extends React.Component&lt;Props&gt; {    render() {       const { text } = this.props;        return (          &lt;div className=&quot;test&quot;&gt;             Example Component: {text}             &lt;p&gt;Coool!&lt;\/p&gt;          &lt;\/div&gt;       );    } }  export default ExampleComponent;<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432 <code>src<\/code> \u043d\u0430\u0434\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0441 \u043e\u0431\u0449\u0438\u043c\u0438 \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438, \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d \u0442\u0438\u043f \u0434\u043b\u044f css \u0438 svg (\u043f\u043e\u0434\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0443 CRL).<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">typings.d.ts<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">\/**  * Default CSS definition for typescript,  * will be overridden with file-specific definitions by rollup  *\/ declare module '*.css' {    const content: { [className: string]: string };    export default content; }  interface SvgrComponent extends React.FunctionComponent&lt;React.SVGAttributes&lt;SVGElement&gt;&gt; {}  declare module '*.svg' {    const svgUrl: string;    const svgComponent: SvgrComponent;    export default svgUrl;    export { svgComponent as ReactComponent }; }<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0438\u0442\u0440\u0443\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 css \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435. \u0423 \u043d\u0430\u0441 \u044d\u0442\u043e \u2014 <code>src\/index.tsx<\/code>. \u0415\u0441\u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e css \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438 \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d \u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u0435 \u0438\u043c\u043f\u043e\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u0432 <code>src\/index.tsx<\/code>, \u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043a\u0438\u043d\u0443\u0442 \u0438\u0437 \u0441\u0431\u043e\u0440\u043a\u0438, \u0447\u0442\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">src\/index.tsx<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import { ExampleComponent, Props } from '.\/ExampleComponent'; import '.\/export.css';  export { ExampleComponent, Props };<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u2014 <code>npm run build<\/code>. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u0441\u044f <code>rollup<\/code> \u0438 \u0441\u043e\u0431\u0435\u0440\u0451\u0442 \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u0431\u0430\u043d\u0434\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043d\u0430\u0439\u0434\u0451\u043c \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>dist<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430.<\/p>\n<p>  <\/p>\n<h3 id=\"zabyvaem-o-formatirovanii-koda-s-prettier\">\u0417\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u0434\u0430 \u0441 Prettier<\/h3>\n<p>  <\/p>\n<p>\u0422\u0435\u0440\u043f\u0435\u0442\u044c \u043d\u0435 \u043c\u043e\u0433\u0443 \u0432 code-review \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u043d\u0435\u0431\u0440\u0435\u0436\u043d\u043e\u0435 \u0438\u043b\u0438 \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0430 \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0441\u043f\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e \u043d\u0435\u0433\u043e. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043d\u0435\u0434\u043e\u0447\u0451\u0442\u044b \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b, \u043e\u0434\u043d\u0430\u043a\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043b\u0443\u0447\u0448\u0435 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438 \u043a\u0430\u043a \u043a\u043e\u0434 \u0434\u0435\u043b\u0430\u0435\u0442, \u0430 \u043d\u0435 \u043a\u0430\u043a \u043e\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442. \u042d\u0442\u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u2014 \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u0430\u043d\u0434\u0438\u0434\u0430\u0442 \u043d\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044e. \u0415\u0441\u0442\u044c \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442 \u043f\u043e\u0434 \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u2014 <a href=\"https:\/\/prettier.io\/\">prettier<\/a>. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0435\u0433\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install --save-dev prettier<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0443\u0442\u043e\u0447\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0430\u0432\u0438\u043b \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">.prettierrc.json<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"json\">{    &quot;tabWidth&quot;: 3,    &quot;singleQuote&quot;: true,    &quot;jsxBracketSameLine&quot;: true,    &quot;arrowParens&quot;: &quot;always&quot;,    &quot;printWidth&quot;: 100,    &quot;semi&quot;: true,    &quot;bracketSpacing&quot;: true }<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u043f\u0440\u0430\u0432\u0438\u043b \u043c\u043e\u0436\u043d\u043e \u0432 <a href=\"https:\/\/prettier.io\/docs\/en\/options.html\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>. WebStrom \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u0430\u043c\u0430 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>prettier<\/code> \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 IDE. \u0427\u0442\u043e\u0431\u044b \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435 \u0442\u0440\u0430\u0442\u0438\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u043f\u0443\u0441\u0442\u0443\u044e, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>\/node_modules<\/code> \u0438 <code>\/dist<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0430\u0439\u043b\u0430 <code>.prettierignore<\/code> (\u0444\u043e\u0440\u043c\u0430\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d <code>.gitignore<\/code>). \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c <code>prettier<\/code>, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u043a\u043e\u0434\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">prettier --write &quot;**\/*&quot;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u044f\u0432\u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0440\u0443\u043a\u0430\u043c\u0438 \u0438 \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c, \u0447\u0442\u043e \u043a\u043e\u0434 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d <code>prettier<\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0430\u043f\u0443\u0441\u043a <code>prettier<\/code> \u043d\u0430 <code>precommit-hook<\/code> \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432, \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u043d\u044b\u0445 \u043a\u0430\u043a <code>staged<\/code> (\u0447\u0435\u0440\u0435\u0437 <code>git add<\/code>). \u0414\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0434\u0435\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u0432\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430. \u0412\u043e-\u043f\u0435\u0440\u044b\u0445 \u2014 \u044d\u0442\u043e <a href=\"https:\/\/github.com\/typicode\/husky\">hasky<\/a>, \u043e\u0442\u0432\u0435\u0442\u0441\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0437\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043a\u043e\u043c\u0430\u043d\u0434 \u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u043c\u043c\u0438\u0442\u043e\u043c, \u043f\u0443\u0448\u0435\u043c \u0438 \u0442.\u043f. \u0410 \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445 \u2014 \u044d\u0442\u043e <a href=\"https:\/\/github.com\/okonet\/lint-staged\">lint-staged<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043b\u0438\u043d\u0442\u0435\u0440\u044b \u043d\u0430 <code>staged<\/code> \u0444\u0430\u0439\u043b\u044b. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u0447\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u0438 \u043f\u0430\u043a\u0435\u0442\u044b \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432 <code>package.json<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npx mrm lint-staged<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0435 \u0436\u0434\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043e \u043a\u043e\u043c\u043c\u0438\u0442\u0430, \u0430 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b <code>prettier<\/code> \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043d\u0430\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0414\u0430, \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u043f\u0430\u043a\u0435\u0442 \u2014 <a href=\"https:\/\/github.com\/Qard\/onchange\">onchange<\/a>. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438 \u0442\u0443\u0442 \u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0434\u043b\u044f \u043d\u0438\u0445 \u043a\u043e\u043c\u0430\u043d\u0434\u0443. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install --save-dev --save-exact onchange<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043f\u043e\u043b\u044f <code>scripts<\/code> \u0432 <code>package.json<\/code> \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"json\">&quot;prettier-watch&quot;: &quot;onchange 'src\/**\/*' -- prettier --write {{changed}}&quot;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0435 \u0441\u043f\u043e\u0440\u044b \u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u0432\u0430\u043d\u0438\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0430\u043a\u0440\u044b\u0442\u044b\u043c\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"izbegaem-oshibok-s-eslint\">\u0418\u0437\u0431\u0435\u0433\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043e\u043a \u0441 ESLint<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/eslint.org\/\">ESLint<\/a> \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u0441\u0442\u0430\u043b \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c \u0438 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u043e \u0432\u0441\u0435\u0445 js \u0438 ts-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u041d\u0430\u043c \u043e\u043d \u0442\u043e\u0436\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442. \u0412 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 ESLint \u044f \u0434\u043e\u0432\u0435\u0440\u044f\u044e CRA, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u044c\u043c\u0451\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0438\u0437 CRA \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0432 \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u0434\u043b\u044f TS \u0438 <code>prettier<\/code> (\u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u043a\u0442\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 <code>ESLint<\/code> \u0438 <code>prettier<\/code>):<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install --save-dev eslint eslint-config-react-app eslint-loader eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint\/eslint-plugin @typescript-eslint\/parser babel-eslint eslint-config-prettier eslint-plugin-prettier<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c <code>ESLint<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">.eslintrc.json<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"json\">{    &quot;extends&quot;: [       &quot;plugin:@typescript-eslint\/recommended&quot;,       &quot;react-app&quot;,       &quot;prettier&quot;,       &quot;prettier\/@typescript-eslint&quot;    ],    &quot;plugins&quot;: [       &quot;@typescript-eslint&quot;,       &quot;react&quot;    ],    &quot;rules&quot;: {       &quot;@typescript-eslint\/no-empty-interface&quot;: &quot;off&quot;,       &quot;@typescript-eslint\/explicit-function-return-type&quot;: &quot;off&quot;,       &quot;@typescript-eslint\/explicit-member-accessibility&quot;: &quot;off&quot;    } }<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u043e\u043b\u0435 <code>scripts<\/code> \u0438\u0437 <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>lint<\/code> \u2014 <code>eslint src\/**\/* --ext .ts,.tsx --fix<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c eslint \u0447\u0435\u0440\u0435\u0437 <code>npm run lint<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"testiruem-s-jest\">\u0422\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c \u0441 Jest<\/h3>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0441\u0442\u044b \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0438 \u0441\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u0443\u0435\u043c <a href=\"https:\/\/jestjs.io\/\">Jest<\/a> \u2014 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442 facebook. \u041e\u0434\u043d\u0430\u043a\u043e, \u0442.\u043a. \u043c\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c TS \u043d\u0435 \u0447\u0435\u0440\u0435\u0437 babel 7, \u0430 \u0447\u0435\u0440\u0435\u0437 tsc, \u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/kulshekhar.github.io\/ts-jest\/\">ts-jest<\/a>:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install --save-dev jest ts-jest @types\/jest<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b jest \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u043b \u0438\u043c\u043f\u043e\u0440\u0442\u044b css \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0434\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u043c\u043e\u043a\u0430\u043c\u0438. \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u0430\u0442\u0430\u043b\u043e\u0433 <code>__mocks__<\/code> \u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u0430\u043c \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430.<br \/>  <code>styleMock.ts<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {};<\/code><\/pre>\n<p>  <\/p>\n<p><code>fileMock.ts<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = 'test-file-stub';<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043e\u043d\u0444\u0438\u0433 jest.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">jest.config.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">module.exports = {    preset: 'ts-jest',    testEnvironment: 'node',    moduleNameMapper: {       '\\\\.(css|less|sass|scss)$': '&lt;rootDir&gt;\/__mocks__\/styleMock.ts',       '\\\\.(gif|ttf|eot|svg)$': '&lt;rootDir&gt;\/__mocks__\/fileMock.ts'    } };<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u0442\u0435\u0441\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e <code>ExampleComponent<\/code> \u0432 \u0435\u0433\u043e \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">ExampleComponent.test.tsx<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import { ExampleComponent } from '.\/ExampleComponent';  describe('ExampleComponent', () =&gt; {    it('is truthy', () =&gt; {       expect(ExampleComponent).toBeTruthy();    }); });<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u043e\u043b\u0435 <code>scripts<\/code> \u0438\u0437 <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>test<\/code> \u2014 <code>npm run lint &amp;&amp; jest<\/code>. \u0414\u043b\u044f \u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0441\u0442\u0438 \u0435\u0449\u0451 \u0438 \u043f\u0440\u043e\u0433\u043e\u043d\u0438\u043c \u043b\u0438\u043d\u0442\u0435\u0440. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u0442\u0435\u0441\u0442\u044b \u0438 \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043e\u043d\u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u2014 <code>npm run test<\/code>. \u0410 \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0442\u0435\u0441\u0442\u044b \u043d\u0435 \u043f\u043e\u043f\u0430\u043b\u0438 \u0432 <code>dist<\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 <code>Rollup<\/code> \u043f\u043b\u0430\u0433\u0438\u043d\u0443 <code>typescritp<\/code> \u043f\u043e\u043b\u0435 <code>exclude<\/code> \u2014 <code>['src\/**\/*.test.(tsx|ts)']<\/code>. \u0423\u043a\u0430\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a \u0442\u0435\u0441\u0442\u043e\u0432 \u0432 <code>husky pre-commit hook<\/code> \u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c <code>lint-staged<\/code> \u2014 <code>&quot;pre-commit&quot;: &quot;npm run test &amp;&amp; lint-staged&quot;<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"razrabatyvaem-dokumentiruem-i-lyubuemsya-komponentami-s-storybook\">\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0438 \u043b\u044e\u0431\u0443\u0435\u043c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0441 Storybook<\/h3>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0434\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0435\u0451 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0433\u043e \u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0432\u0430\u043d\u0438\u044f. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0442\u043e \u043f\u0440\u043e \u043d\u0438\u0445 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c, \u043d\u043e \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a \u043e\u043d\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442, \u0430 \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0442\u0440\u043e\u0433\u0430\u0442\u044c \u0438 \u043f\u043e\u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c. \u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0442\u0430\u043a\u043e\u0439 \u0445\u043e\u0442\u0435\u043b\u043a\u0438 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0439. \u0420\u0430\u043d\u044c\u0448\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"https:\/\/github.com\/styleguidist\/react-styleguidist\">Styleguidist<\/a>. \u042d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 markdown, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u043d\u0435\u0451 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u044b\u0445 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438 \u0438\u0437 \u043d\u0435\u0451 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u0439\u0442-\u0432\u0438\u0442\u0440\u0438\u043d\u0430-\u043a\u0430\u0442\u0430\u043b\u043e\u0433, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043e \u043d\u0451\u043c, \u0443\u0437\u043d\u0430\u0442\u044c \u043e \u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u043f\u0430\u043b\u043e\u0447\u043a\u043e\u0439.<\/p>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u044f \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u0438\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u0441\u044f \u043a \u0435\u0433\u043e \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u0443 \u2014 <a href=\"https:\/\/storybook.js.org\/\">Storybook<\/a>. \u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u043d \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043c\u043e\u0449\u043d\u044b\u043c \u0441 \u0435\u0433\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u043d \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0438\u043c\u0435\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u0438 <a href=\"https:\/\/medium.com\/storybookjs\/storybook-docs-sneak-peak-5be78445094a\">\u0441\u043a\u043e\u0440\u043e<\/a> \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0447\u043d\u0451\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e markdown-\u0444\u0430\u0439\u043b\u043e\u0432. \u0415\u0449\u0451 \u043e\u0434\u043d\u043e \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u043e Storybook \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u043e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435\u0439 \u2014 \u0441\u0440\u0435\u0434\u043e\u0439 \u0434\u043b\u044f \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u043d\u0438\u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f-\u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 CRL). \u0412 storybook \u043c\u044b \u043f\u0438\u0448\u0435\u043c <code>stories<\/code> \u2014 ts-\u0444\u0430\u0439\u043b\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u043d\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0432\u0445\u043e\u0434\u044b\u043c\u0438 <code>props<\/code> \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 (\u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043a\u043e\u0434, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0430\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u0435\u0435). \u0412 \u0438\u0442\u043e\u0433\u0435 \u0438\u0437 \u044d\u0442\u0438\u0445 <code>stories<\/code> \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435-\u0432\u0438\u0442\u0440\u0438\u043d\u0430.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e storybook:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npx -p @storybook\/cli sb init<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u0440\u0443\u0436\u0438\u043c \u0435\u0433\u043e \u0441 TS. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0435\u0449\u0451 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u043e\u0432, \u0430 \u0437\u0430\u043e\u0434\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0430\u0440\u0443 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0430\u0434\u0434\u043e\u043d\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install --save-dev awesome-typescript-loader @types\/storybook__react @storybook\/addon-info react-docgen-typescript-loader @storybook\/addon-actions @storybook\/addon-knobs @types\/storybook__addon-info @types\/storybook__addon-knobs webpack-blocks<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043a\u0440\u0438\u043f\u0442 \u0441\u043e\u0437\u0434\u0430\u043b \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439 <code>storybook<\/code> \u2014 <code>.storybook<\/code> \u0438 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0431\u0435\u0437\u0436\u0430\u043b\u043e\u0441\u0442\u043d\u043e \u0443\u0434\u0430\u043b\u044f\u0435\u043c. \u0410 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0439 \u043c\u0435\u043d\u044f\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 <code>addons<\/code> \u0438 <code>config<\/code> \u043d\u0430 <code>ts<\/code>. \u0412 \u0444\u0430\u0439\u043b <code>addons.ts<\/code> \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0430\u0434\u0434\u043e\u043d\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">import '@storybook\/addon-actions\/register'; import '@storybook\/addon-links\/register'; import '@storybook\/addon-knobs\/register';<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043d\u0430\u0434\u043e \u043f\u043e\u043c\u043e\u0447\u044c storybook \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0430 webpack \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>.storybook<\/code>.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">webpack.config.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">module.exports = ({ config }) =&gt; {    config.module.rules.push({       test: \/\\.(ts|tsx)$\/,       use: [          {             loader: require.resolve('awesome-typescript-loader')          },          \/\/ Optional          {             loader: require.resolve('react-docgen-typescript-loader')          }       ]    });    config.resolve.extensions.push('.ts', '.tsx');    return config; };<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u043f\u0440\u0430\u0432\u0438\u043c \u043a\u043e\u043d\u0444\u0438\u0433 <code>config.ts<\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0430\u0434\u0434\u043e\u043d\u043e\u0432 \u043a\u043e \u0432\u0441\u0435\u043c \u043d\u0430\u0448\u0438\u043c stories.<\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">config.ts<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import { configure } from '@storybook\/react'; import { addDecorator } from '@storybook\/react'; import { withInfo } from '@storybook\/addon-info'; import { withKnobs } from '@storybook\/addon-knobs';  \/\/ automatically import all files ending in *.stories.tsx const req = require.context('..\/src', true, \/\\.stories\\.tsx$\/);  function loadStories() {    req.keys().forEach(req); }  configure(loadStories, module);  addDecorator(withInfo); addDecorator(withKnobs);<\/code><\/pre>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0448\u0443 \u043f\u0435\u0440\u0432\u0443\u044e <code>story<\/code> \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>ExampleComponent<\/code><\/p>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">ExampleComponent.stories.tsx<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">import * as React from 'react'; import { storiesOf } from '@storybook\/react'; import { ExampleComponent } from '.\/ExampleComponent'; import { text } from '@storybook\/addon-knobs\/react';  const stories = storiesOf('ExampleComponent', module);  stories.add('ExampleComponent', () =&gt; &lt;ExampleComponent text={text('text', 'Some text')} \/&gt;, {    info: { inline: true },    text: `    ### Notes    Simple example component    ### Usage   ~~~js   &lt;ExampleComponent     text=&quot;Some text&quot;   \/&gt;   ~~~  ` });<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0430\u0434\u0434\u043e\u043d\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/@storybook\/addon-knobs\">knobs<\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0440\u043c\u0435\u043d\u0438 \u043c\u0435\u043d\u044f\u0442\u044c props \u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043c\u043e\u043c \u0432 Storybook \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c props \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 stories<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/@storybook\/addon-info\">info<\/a> \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 props \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 story<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u0440\u0430\u0442\u0438\u043c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 storybook \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043a \u043d\u0430\u043c \u0432 <code>package.json<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>storybook<\/code>. \u0412\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0435\u0439 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 <code>npm run storybook<\/code>. Storybook \u0441\u043e\u0431\u0435\u0440\u0451\u0442\u0441\u044f \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <code>http:\/\/localhost:6006<\/code>. \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u0442\u0430\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044f <code>typescript<\/code>\u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 <code>Rollup<\/code> \u2014 <code>'src\/**\/*.stories.tsx'<\/code>.<\/p>\n<p>  <\/p>\n<h3 id=\"razrabatyvaem\">\u0420\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c<\/h3>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u043e\u043a\u0440\u0443\u0436\u0438\u0432 \u0441\u0435\u0431\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0443\u0434\u043e\u0431\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u0438\u0445 \u0438\u0445 \u043a \u0440\u0430\u0431\u043e\u0442\u0435, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0432 <code>src\/components<\/code> \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412 \u043d\u0451\u043c \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u0441\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043d\u0438\u043c \u0444\u0430\u0439\u043b\u044b \u2014 css, \u0441\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 tsx-\u0444\u0430\u0439\u043b\u0435, \u0442\u0435\u0441\u0442\u044b, stories. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c storybook, \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 stories, \u0442\u0430\u043c \u0436\u0435 \u043f\u0438\u0448\u0435\u043c \u043a \u043d\u0435\u043c\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e. \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u0435\u0441\u0442\u044b \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c. \u0418\u043c\u043f\u043e\u0440\u0442-\u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432 <code>index.ts<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043c\u043e\u0436\u043d\u043e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 <code>npm<\/code> \u0438 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u0430\u043a \u043d\u043e\u0432\u044b\u0439 npm-\u043f\u0430\u043a\u0435\u0442. \u0410 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0435\u0451 \u043f\u0440\u044f\u043c\u043e \u0438\u0437 git-\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u043a\u0430\u043a \u0438\u0437 master, \u0442\u0430\u043a \u0438 \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u0432\u0435\u0442\u043e\u043a. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043c\u043e\u0435\u0439 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm i -s git+https:\/\/github.com\/jmorozov\/react-library-example.git<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438-\u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 <code>node_modules<\/code> \u0431\u044b\u043b\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 <code>dist<\/code> \u0432 \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043f\u043e\u043b\u0435 <code>scripts<\/code> \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>&quot;prepare&quot;: &quot;npm run build&quot;<\/code>. <\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f TS, \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432 IDE.<\/p>\n<p>  <\/p>\n<h2 id=\"podvodim-itogi\">\u041f\u043e\u0434\u0432\u043e\u0434\u0438\u043c \u0438\u0442\u043e\u0433\u0438<\/h2>\n<p>  <\/p>\n<p>\u0412 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 2019 \u0433\u043e\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 React \u0438 TypeScript, \u043f\u043e\u043b\u044c\u0437\u0443\u044f\u0441\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u042d\u0442\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u043a\u0430\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0443\u0442\u0438\u043b\u0438\u0442\u044b, \u0442\u0430\u043a \u0438 \u0432 \u0440\u0443\u0447\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435. \u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0443\u0442\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u044b \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f. \u0413\u043b\u0430\u0432\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043a\u0443\u0434\u0430 \u043a\u043e\u043f\u0430\u0442\u044c, \u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u044f \u043d\u0430\u0434\u044e\u0441\u044c, \u044d\u0442\u043e \u0441\u0442\u0430\u043b\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0449\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0437\u044f\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0443\u044e\u0441\u044f \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0443 <a href=\"https:\/\/github.com\/jmorozov\/react-library-example\">\u0442\u0443\u0442<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0447\u0435\u0433\u043e, \u044f \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u044e \u043d\u0430 \u0438\u0441\u0442\u0438\u043d\u0443 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0438\u043d\u0441\u0442\u0430\u043d\u0446\u0438\u0438 \u0438, \u0432\u043e\u043e\u0431\u0449\u0435, \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u043c \u043f\u043e\u0441\u0442\u043e\u043b\u044c\u043a\u0443-\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0438 \u043e\u043f\u0446\u0438\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0438 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0443\u0441\u043f\u0435\u0445\u0430 \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0432\u043e\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0411\u0443\u0434\u0443 \u0440\u0430\u0434, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0441\u0432\u043e\u0438\u043c\u0438 \u0440\u0435\u0446\u0435\u043f\u0442\u0430\u043c\u0438. Happy coding!<\/p>\n<\/div>\n<p>               <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d()}}}t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>     <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/461439\/\"> https:\/\/habr.com\/ru\/post\/461439\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\">\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/nc\/57\/zc\/nc57zcknvdousryimpgxxqsiz1i.jpeg\" \/><\/div>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0441\u0432\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b, \u044f \u043f\u0438\u0448\u0443 \u0431\u044d\u043a\u0435\u043d\u0434\u044b, \u043d\u043e \u0432\u043e\u0442 \u043d\u0430 \u0434\u043d\u044f\u0445 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0430\u0447\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 React. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434, \u043a\u043e\u0433\u0434\u0430 \u0432\u0435\u0440\u0441\u0438\u044f React \u0431\u044b\u043b\u0430 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439, \u043a\u0430\u043a \u0438 \u043c\u043e\u0439 \u043e\u043f\u044b\u0442 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u044f \u0443\u0436\u0435 \u0434\u0435\u043b\u0430\u043b \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0441\u043d\u0430\u0440\u044f\u0434\u0443 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043d\u0435\u0443\u043c\u0435\u043b\u043e \u0438 \u043a\u043e\u0440\u044f\u0432\u043e. \u041f\u0440\u0438\u043d\u0438\u043c\u0430\u044f \u0432\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0437\u0440\u0435\u043b\u043e\u0441\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u044b React \u0438 \u043c\u043e\u0439 \u043f\u043e\u0434\u0440\u043e\u0441\u0448\u0438\u0439 \u043e\u043f\u044b\u0442, \u044f \u0432\u043e\u043e\u0434\u0443\u0448\u0435\u0432\u0438\u043b\u0441\u044f \u0443\u0436 \u0432 \u044d\u0442\u043e\u0442-\u0442\u043e \u0440\u0430\u0437 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0451 \u0445\u043e\u0440\u043e\u0448\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u043e. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0434\u043b\u044f \u0431\u0443\u0434\u0443\u0449\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0430 \u0447\u0442\u043e\u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u0431\u044b\u043b\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f-\u0448\u043f\u0430\u0440\u0433\u0430\u043b\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u043c\u043e\u0447\u044c \u0442\u0435\u043c, \u043a\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u0441 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0436\u0435 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c.<\/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-292594","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/292594","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=292594"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/292594\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=292594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=292594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=292594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}