{"id":332841,"date":"2022-05-06T09:00:38","date_gmt":"2022-05-06T09:00:38","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=332841"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=332841","title":{"rendered":"<span>Node.js: \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/4-\/hn\/8w\/4-hn8wkkaeafijehpfybkgcounq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/4-\/hn\/8w\/4-hn8wkkaeafijehpfybkgcounq.png\"\/>  <\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u0412\u0430\u043c \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0443\u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 (module bundlers) <em>JavaScript<\/em> \u0442\u0438\u043f\u0430 <a href=\"https:\/\/webpack.js.org\/\">Webpack<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/parceljs.org\/\">Parcel<\/a>, \u0447\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c, \u0442\u043e\u0433\u0434\u0430 \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0434\u043b\u044f \u0432\u0430\u0441.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435 \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043d\u0430 <a href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043e\u0434\u0438\u043d \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0441 \u043a\u043e\u0434\u043e\u043c, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 <em>ES5<\/em>.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/ronami\/minipack\">\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0435\u043d\u0438\u044f<\/a>.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/harryheman\/Blog-Posts\/tree\/master\/nodejs-bundler\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u043a\u043e\u0434\u043e\u043c<\/a>.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<h2 id=\"vvedenie\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u044e\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430 \u0432 \u043e\u0434\u0438\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. \u042d\u0442\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u0430 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e <em>JS-\u0444\u0430\u0439\u043b\u044b<\/em>, \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0432\u0438\u0434\u0435 <a href=\"https:\/\/webpack.js.org\/concepts\/modules\">\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0421\u0431\u043e\u0440\u0449\u0438\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u0432\u0445\u043e\u0434\u043d\u043e\u0433\u043e (entry) \u0444\u0430\u0439\u043b\u0430. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0434\u043b\u044f \u0438\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c, \u043c\u044b \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0443 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0439 \u0444\u0430\u0439\u043b \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0445\u043e\u0434\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 (entrypoint) \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442.\u0435. \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0439 \u0444\u0430\u0439\u043b \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0433\u043b\u0430\u0432\u043d\u044b\u043c \u0438\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (bootstrap) \u043a\u043e\u0434\u0430 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0421\u0431\u043e\u0440\u0449\u0438\u043a \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043e\u0442 \u043a\u0430\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043e\u043d \u0437\u0430\u0432\u0438\u0441\u0438\u0442. \u0417\u0430\u0442\u0435\u043c \u043e\u043d \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f &#171;\u043f\u043e\u043d\u044f\u0442\u044c&#187;, \u043d\u0430 \u043a\u0430\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b. \u0422\u0430\u043a \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043d\u0435 \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442 \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438. \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0433\u0440\u0430\u0444\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 (dependency graph).<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0433\u0440\u0430\u0444 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0434\u043b\u044f \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0438 (package) \u0432\u0441\u0435\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0431\u043e\u0440\u043a\u0443 (bundle).<\/p>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u043d\u0430\u0448 \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u0438 \u0435\u0433\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043c\u044b \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0431\u0435\u0437 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0432\u0435\u0449\u0438, \u043a\u0430\u043a \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0446\u0438\u043a\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 (cyclic dependencies), \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043e\u0434\u043d\u043e\u043a\u0440\u0430\u0442\u043d\u044b\u0439 \u0440\u0430\u0437\u0431\u043e\u0440 (parsing) \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u0438 \u0442.\u0434.<\/p>\n<p>  <\/p>\n<h2 id=\"podgotovka-i-nastroyka-proekta\">\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 <em>npm-\u043f\u0430\u043a\u0435\u0442\u044b<\/em>:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/babel-core\">babel-core<\/a>: \u044f\u0434\u0440\u043e \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0442\u043e\u0440\u0430 <a href=\"https:\/\/babeljs.io\/\">Babel<\/a> \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043a\u043e\u0434\u0430;<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/babel-preset-env\">babel-preset-env<\/a>: \u043f\u0440\u0435\u0441\u0435\u0442 <em>Babel<\/em> \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 <em>JS-\u043a\u043e\u0434\u0430<\/em>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 <em>ES6+<\/em>, \u0432 <em>ES5-\u043a\u043e\u0434<\/em>, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432;<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/babel-traverse\">babel-traverse<\/a>: \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0443\u0437\u043b\u043e\u0432 (nodes) \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 (Abstract Syntax Tree, AST); \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 <em>babylon<\/em> (\u0441\u043c. \u043d\u0438\u0436\u0435);<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/babylon\">babylon<\/a>: \u043f\u0430\u0440\u0441\u0435\u0440 (parser) <em>JS<\/em>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0432 <em>Babel<\/em>;<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/fs-extra\">fs-extra<\/a>: \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c <a href=\"https:\/\/nodejs.org\/api\/fs.html\">fs<\/a>;<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/uglify-js\">uglify-js<\/a>: \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0431\u043e\u0440\u0430, \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0441\u0436\u0430\u0442\u0438\u044f \u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f <em>JS-\u043a\u043e\u0434\u0430<\/em>.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u0438 \u0438\u0437 \u043a\u0430\u043a\u0438\u0445 \u044d\u0442\u0430\u043f\u043e\u0432 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u041f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/my-js.org\/blog\/js-compiler\/\">\u0437\u0434\u0435\u0441\u044c<\/a> \u0438 <a href=\"https:\/\/my-js.org\/blog\/ts-compiler\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u043d\u0435\u0435, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c <em>Node.js-\u043f\u0440\u043e\u0435\u043a\u0442<\/em> \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">mkdir nodejs-bundler cd $!  yarn init -yp # or npm init -y  yarn add babel-core babel-preset-env babel-traverse babylon fs-extra uglify-js # or npm i ...<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043a\u043e\u0434\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 <em>package.json<\/em>:<\/p>\n<p>  <\/p>\n<pre><code class=\"json\">\"scripts\": {   \"build\": \"node bundle.js\",   \"start\": \"node build\/index.js\" }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u043e\u0434 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 <em>bundle.js<\/em>, \u0430 \u0441\u0430\u043c\u0430 \u0441\u0431\u043e\u0440\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0444\u0430\u0439\u043b <em>index.js<\/em>, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0439\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 <em>build<\/em>.<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <em>bundler.config.json<\/em> \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"json\">{   \"entryPoint\": \"src\/main.js\",   \"outDir\": \"build\" }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0445\u043e\u0434\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 (\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b) \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (<em>src\/main.js<\/em>) \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 (<em>build<\/em>).<\/p>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e <em>src<\/em> \u0441 \u0442\u0440\u0435\u043c\u044f \u0444\u0430\u0439\u043b\u0430\u043c\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">mkdir src cd $!  touch who.js greeting.js main.js<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ who.js export const who = process.argv.slice(2)[0]  \/\/ greeting.js import { who } from '.\/who.js'  const greeting = `\u041f\u0440\u0438\u0432\u0435\u0442, ${who || '\u043d\u0435\u0437\u043d\u0430\u043a\u043e\u043c\u0435\u0446'}!`  export default greeting  \/\/ main.js import greeting from '.\/message.js'  console.log(greeting)<\/code><\/pre>\n<p>  <\/p>\n<p>\u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 <em>who.js<\/em> \u043c\u044b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 (\u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b <code>start<\/code> \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435) (<code>process.argv<\/code>), \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 (\u043d\u0435\u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439) \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 (<code>process.argv.slice(2)[0]<\/code>) \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>who<\/em>. \u042d\u0442\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e (\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044d\u043a\u0441\u043f\u043e\u0440\u0442).<\/li>\n<li>\u0412 \u0444\u0430\u0439\u043b\u0435 <em>greeting.js<\/em> \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <em>who<\/em>, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439 \u0438\u0437 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430. \u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>greeting<\/em>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e.<\/li>\n<li>\u0412 \u0444\u0430\u0439\u043b\u0435 <em>main.js<\/em> \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <em>greeting<\/em> \u0438\u0437 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c.<\/li>\n<\/ul>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em>: \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438 (\u0438\u0445 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430\/\u0438\u043c\u043f\u043e\u0440\u0442\u0430) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 <em>ESM<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0432\u0432\u0435\u0434\u0435\u043d \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c <em>ECMAScript2015<\/em> (<em>ES6<\/em>).<\/p>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0430\u0448\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438\u0437 <em>ES6<\/em> \u0432 <em>ES5<\/em> \u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043e\u0434\u0438\u043d \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 <em>JS-\u0444\u0430\u0439\u043b<\/em> (<em>build\/index.js<\/em>). \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u043c.<\/p>\n<p>  <\/p>\n<h2 id=\"razrabotka-sborschika\">\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430<\/h2>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0430\u0439\u043b <em>bundle.js<\/em>.<\/p>\n<p>  <\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u0430\u043a\u0435\u0442\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const fs = require('fs-extra') const path = require('path') const babylon = require('babylon') \/\/ \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 const traverse = require('babel-traverse').default const { transformFromAst } = require('babel-core') const UglifyJS = require('uglify-js')<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c &#171;\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440&#187; \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let ID = 0<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0438 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u0435\u0433\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 function createAsset(filename) {   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0438\u0442\u0430\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const content = fs.readFileSync(filename, 'utf-8')<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u043f\u043e\u0438\u0441\u043a\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>import<\/code>, \u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <em>JS-\u043f\u0430\u0440\u0441\u0435\u0440<\/em>. \u041f\u0430\u0440\u0441\u0435\u0440\u044b \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043c\u0435\u044e\u0442 \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c <em>JS-\u043a\u043e\u0434<\/em>. \u041e\u043d\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442 <em>AST<\/em>. \u0412\u043e\u0442 <a href=\"https:\/\/astexplorer.net\/\">\u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043e\u043d\u043b\u0430\u0439\u043d-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u043e\u0433\u043e JS-\u043a\u043e\u0434\u0430 \u0432 \u0432\u0438\u0434\u0435 AST<\/a>.<\/p>\n<p>  <\/p>\n<p><em>AST<\/em> \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043a\u043e\u0434\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 &#171;\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c&#187;.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const ast = babylon.parse(content, {   \/\/ \u0440\u0435\u0436\u0438\u043c \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 \u043a\u043e\u0434\u0430   sourceType: 'module' })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0434\u043b\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const dependencies = []<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c (traverse) \u0443\u0437\u043b\u044b (nodes) AST \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0438\u0441\u043a \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 (import statements). \u041f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">traverse(ast, {   ImportDeclaration: ({ node }) => {     dependencies.push(node.source.value)   } })<\/code><\/pre>\n<p>  <\/p>\n<p>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const id = ID++<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <em>ESM<\/em> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 <em>JS<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0432\u0441\u0435\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u0414\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u0432\u0441\u0435\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0434 \u043c\u043e\u0434\u0443\u043b\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <em>Babel<\/em>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const { code } = transformFromAst(ast, null, {     presets: ['env']   })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 <code>presets<\/code> \u2014 \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u0430\u0432\u0438\u043b \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043a\u043e\u0434\u0430. <code>babel-preset-env<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 (<em>ES6<\/em>) \u0432 \u043a\u043e\u0434, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 (<em>ES5<\/em>).<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0432\u0441\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043c\u043e\u0434\u0443\u043b\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">return {   id,   filename,   dependencies,   code }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 function createGraph(entry) {   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0442\u0435\u043b\u0435 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430. \u0417\u0430\u0442\u0435\u043c \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u042d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442\u0441\u044f \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0438\u0445 \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0433\u0440\u0430\u0444 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const mainAsset = createAsset(entry)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0437\u0431\u043e\u0440\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u0440\u0435\u0434\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const queue = [mainAsset]<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043e\u0447\u0435\u0440\u0435\u0434\u0438.<\/p>\n<p>  <\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043d\u043e \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043f\u0435\u0440\u0435\u0431\u043e\u0440\u0430 \u0432 \u043d\u0435\u0435 \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0426\u0438\u043a\u043b \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0443\u0441\u0442\u043e\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">for (const asset of queue) {   \/\/ \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 (\u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0445 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439).   \/\/ \u041c\u044b \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u0445, \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e `createAsset()` \u0438   \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e `mapping`   asset.mapping = {}    \/\/ \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c   const dirname = path.dirname(asset.filename)    \/\/ \u041f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439   asset.dependencies.forEach((relativePath) => {     \/**      * \u041d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f `createAsset` \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443.      * \u041c\u0430\u0441\u0441\u0438\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 - \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439.      * \u042d\u0442\u0438 \u043f\u0443\u0442\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043a \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u043c\u0443 \u0438\u0445 \u0444\u0430\u0439\u043b\u0443.      * \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u0438\u0437 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c      * \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0443\u0442\u0438 \u0441 \u043f\u0443\u0442\u0435\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.      *\/     const absolutePath = path.join(dirname, relativePath)      \/\/ \u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0447\u0438\u0442\u0430\u0435\u043c \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0438 \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438     const child = createAsset(absolutePath)      \/\/ \u0414\u043b\u044f \u043d\u0430\u0441 \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e `asset` \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 (\u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430) `child`.     \/\/ \u041c\u044b \u0432\u044b\u0440\u0430\u0436\u0430\u0435\u043c \u044d\u0442\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 `mapping`     asset.mapping[relativePath] = child.id      \/\/ \u041f\u043e\u043c\u0435\u0449\u0430\u0435\u043c `child` \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0434\u043b\u044f \u0442\u043e\u0433\u043e,     \/\/ \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0442\u0430\u043a\u0436\u0435 \u0431\u044b\u043b\u0438 \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u043d\u044b \u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043d\u044b     queue.push(child)   }) }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0433\u0440\u0430\u0444 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432\u0441\u0435\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e (target) \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">return queue<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">function createBundle(graph) {   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0433\u0440\u0430\u0444 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u2014 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u043a\u0430\u0436\u0434\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u0430\u0448\u0430 \u0441\u0431\u043e\u0440\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e (Immediately Invoked Function Expression, IIFE): <code>(function () {})()<\/code>.<\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">let modules = ''<\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0439 \u0432 \u0442\u0435\u043b\u043e <em>IIFE<\/em>. <em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435:<\/em> \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 (<code>{}<\/code>), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 <code>key: value<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">graph.forEach((m) => {   \/**    * \u041a\u0430\u0436\u0434\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c (\u043e\u0431\u044a\u0435\u043a\u0442) \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 (entry).    * \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c `id` \u043c\u043e\u0434\u0443\u043b\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043b\u044e\u0447\u0430 \u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.    * \u041f\u0435\u0440\u0432\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u0434 \u043c\u043e\u0434\u0443\u043b\u044f, \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0439 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e.    * \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043a\u043e\u0434 \u043c\u043e\u0434\u0443\u043b\u044f \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d \u0435\u0433\u043e \u043e\u0431\u043b\u0430\u0441\u0442\u044c\u044e \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 (scope):    * \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438    * \u0438\u043b\u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.    *    * \u041f\u043e\u0441\u043b\u0435 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043c\u043e\u0434\u0443\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 `CommonJS`:    * \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b `require`, `module` \u0438 `exports`.    * \u042d\u0442\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0438\u0445 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e    * \u0438 \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0431\u0435\u0440\u0442\u043a\u0443.    *    * \u0412\u0442\u043e\u0440\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 - \u044d\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0442\u0440\u0438\u043d\u0433\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 (stringification) \u0441\u0432\u044f\u0437\u0435\u0439 \u043c\u0435\u0436\u0434\u0443 \u043c\u043e\u0434\u0443\u043b\u0435\u043c \u0438 \u0435\u0433\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438.    * \u0414\u0430\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:    * { \".\/relative\/path\": \"1\" }    * \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b\u0439 \u043a\u043e\u0434 \u043c\u043e\u0434\u0443\u043b\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 `require()` \u0441 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0443\u0442\u0435\u043c.    * \u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0432 \u0433\u0440\u0430\u0444\u0435    * \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u043e\u043c\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438.    *\/   modules += `${m.id}: [     function (require, module, exports) {       ${m.code}     },     ${JSON.stringify(m.mapping)}   ],` }) \/\/ \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0437\u0430\u043f\u044f\u0442\u0443\u044e \u0432 \u043a\u043e\u043d\u0446\u0435 (\u043f\u043e\u0441\u043b\u0435 `]`)<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c <em>IIFE<\/em>.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>require<\/code>: \u043e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 <code>id<\/code> \u043c\u043e\u0434\u0443\u043b\u044f \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0435\u0433\u043e \u043f\u043e\u0438\u0441\u043a \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 <code>modules<\/code>. \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0434\u043b\u044f \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u0438-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043c\u043e\u0434\u0443\u043b\u044f.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0434 \u043c\u043e\u0434\u0443\u043b\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 <code>require()<\/code> \u0441 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0443\u0442\u0435\u043c \u0432\u043c\u0435\u0441\u0442\u043e <code>id<\/code> \u043c\u043e\u0434\u0443\u043b\u044f. \u041e\u0434\u043d\u0430\u043a\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>require<\/code> \u043e\u0436\u0438\u0434\u0430\u0435\u0442 <code>id<\/code> \u043c\u043e\u0434\u0443\u043b\u044f. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, 2 \u043c\u043e\u0434\u0443\u043b\u044f \u043c\u043e\u0433\u0443\u0442 <code>require()<\/code> \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0443\u0442\u044c, \u043d\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u043f\u0440\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>require<\/code> \u0434\u043b\u044f \u043c\u043e\u0434\u0443\u043b\u044f. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0439 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u0438 \u0431\u0443\u0434\u0435\u0442 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0443\u0442\u0438 \u0432 <code>id<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>mapping<\/code>. <code>mapping<\/code> \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0443\u0442\u044f\u043c\u0438 \u0438 <code>id<\/code> \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 <code>CommonJS<\/code>, \u043f\u0440\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c (expose) \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043c\u0438\u0440\u0430) \u043f\u0443\u0442\u0435\u043c \u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>exports<\/code>. \u041f\u043e\u0441\u043b\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442 <code>exports<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>require<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const result = `   (function(modules) {     function require(id) {       const [fn, mapping] = modules[id]        function localRequire(name) {         return require(mapping[name])       }        const module = { exports: {} }        fn(localRequire, module, module.exports)        return module.exports     }      require(0)   })({ ${modules} }) `<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">return result<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">function pack() {   \/\/ ... }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0438\u0442\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 const PATH_TO_CONFIG = path.join(__dirname, 'bundler.config.json') \/\/ \u0415\u0441\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u0444\u0430\u0439\u043b \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 if (!fs.pathExistsSync(PATH_TO_CONFIG)) {   throw new Error('Config is required.') }  \/\/ \u0427\u0438\u0442\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c `JS-\u043e\u0431\u044a\u0435\u043a\u0442` const config = fs.readJSONSync(PATH_TO_CONFIG) \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u0432\u0445\u043e\u0434\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f if (   !config.entryPoint ||   typeof config.entryPoint !== 'string' ||   !config.entryPoint.trim() ) {   throw new Error('Entrypoint is required.') } \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 if (   !config.outDir ||   typeof config.outDir !== 'string' ||   !config.outDir.trim() ) {   throw new Error('Outdir is required.') }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0433\u0440\u0430\u0444 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 \u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0434:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0433\u0440\u0430\u0444 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 const graph = createGraph(path.join(__dirname, config.entryPoint)) \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 const result = createBundle(graph) \/\/ \u041c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u0434 const { code } = UglifyJS.minify(result)<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041f\u0443\u0442\u044c \u043a \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 const PATH_TO_BUILD = path.join(__dirname, config.outDir) \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0431\u043e\u0440\u043a\u0443 if (fs.pathExistsSync(PATH_TO_BUILD)) {   fs.removeSync(PATH_TO_BUILD) }  \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 fs.mkdirpSync(PATH_TO_BUILD) \/\/ \u0417\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443 fs.writeFileSync(`${PATH_TO_BUILD}\/index.js`, code, 'utf8')  \/\/ \u0421\u043e\u043e\u0431\u0449\u0430\u0435\u043c \u043e\u0431 \u0443\u0441\u043f\u0435\u0445\u0435 console.log('Bundle created.')<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">pack()<\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430:<\/b>                         <\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">const fs = require('fs-extra') const path = require('path') const babylon = require('babylon') const traverse = require('babel-traverse').default const { transformFromAst } = require('babel-core') const UglifyJS = require('uglify-js')  let ID = 0  function createAsset(filename) {   const content = fs.readFileSync(filename, 'utf-8')    const ast = babylon.parse(content, {     sourceType: 'module'   })    const dependencies = []    traverse(ast, {     ImportDeclaration: ({ node }) => {       dependencies.push(node.source.value)     }   })    const id = ID++    const { code } = transformFromAst(ast, null, {     presets: ['env']   })    return {     id,     filename,     dependencies,     code   } }  function createGraph(entry) {   const mainAsset = createAsset(entry)    const queue = [mainAsset]    for (const asset of queue) {     asset.mapping = {}      const dirname = path.dirname(asset.filename)      asset.dependencies.forEach((relativePath) => {       const absolutePath = path.join(dirname, relativePath)        const child = createAsset(absolutePath)        asset.mapping[relativePath] = child.id        queue.push(child)     })   }    return queue }  function createBundle(graph) {   let modules = ''    graph.forEach((m) => {     modules += `${m.id}: [       function (require, module, exports) {         ${m.code}       },       ${JSON.stringify(m.mapping)}     ],`   })    const result = `     (function(modules) {       function require(id) {         const [fn, mapping] = modules[id]          function localRequire(name) {           return require(mapping[name])         }          const module = { exports: {} }          fn(localRequire, module, module.exports)          return module.exports       }        require(0)     })({ ${modules} })   `    return result }  function pack() {   const PATH_TO_CONFIG = path.join(__dirname, 'bundler.config.json')   if (!fs.pathExistsSync(PATH_TO_CONFIG)) {     throw new Error('Config is required.')   }    const config = fs.readJSONSync(PATH_TO_CONFIG)   if (     !config.entryPoint ||     typeof config.entryPoint !== 'string' ||     !config.entryPoint.trim()   ) {     throw new Error('Entrypoint is required.')   }   if (     !config.outDir ||     typeof config.outDir !== 'string' ||     !config.outDir.trim()   ) {     throw new Error('Outdir is required.')   }    const graph = createGraph(path.join(__dirname, config.entryPoint))   const result = createBundle(graph)   const { code } = UglifyJS.minify(result)    const PATH_TO_BUILD = path.join(__dirname, config.outDir)   if (fs.pathExistsSync(PATH_TO_BUILD)) {     fs.removeSync(PATH_TO_BUILD)   }   fs.mkdirpSync(PATH_TO_BUILD)   fs.writeFileSync(`${PATH_TO_BUILD}\/index.js`, code, 'utf-8')    console.log('Bundle created.') } pack()<\/code><\/pre>\n<\/div><\/div>\n<p>  <\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"proverka-rabotosposobnosti\">\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u0445\u043e\u0434\u044f\u0441\u044c \u0432 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (<em>nodejs-bundler<\/em>), \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>yarn build<\/code> \u0438\u043b\u0438 <code>npm run build<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/g4\/tc\/ol\/g4tcol8efe2rsq1gx2f1207_fww.png\" data-src=\"https:\/\/habrastorage.org\/webt\/g4\/tc\/ol\/g4tcol8efe2rsq1gx2f1207_fww.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0444\u0430\u0439\u043b\u0430 <em>build\/index.js<\/em> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">!function(n){!function t(e){const[o,s]=n[e];e={exports:{}};return o(function(e){return t(s[e])},e,e.exports),e.exports}(0)}({0:[function(e,t,o){\"use strict\";var e=e(\".\/greeting.js\"),e=(e=e)&amp;&amp;e.__esModule?e:{default:e};console.log(e.default)},{\".\/greeting.js\":1}],1:[function(e,t,o){\"use strict\";Object.defineProperty(o,\"__esModule\",{value:!0});e=\"\u041f\u0440\u0438\u0432\u0435\u0442, \"+(e(\".\/who.js\").who||\"\u043d\u0435\u0437\u043d\u0430\u043a\u043e\u043c\u0435\u0446\")+\"!\";o.default=e},{\".\/who.js\":2}],2:[function(e,t,o){\"use strict\";Object.defineProperty(o,\"__esModule\",{value:!0});o.who=process.argv.slice(2)[0]},{}]});<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u0430\u044f ES5-\u0432\u0435\u0440\u0441\u0438\u044f \u0432\u0441\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>yarn start<\/code> \u0438\u043b\u0438 <code>npm start<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/kq\/jc\/s4\/kqjcs4zgzhutdik1jfstyynn5ta.png\" data-src=\"https:\/\/habrastorage.org\/webt\/kq\/jc\/s4\/kqjcs4zgzhutdik1jfstyynn5ta.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 &#171;\u041f\u0440\u0438\u0432\u0435\u0442, \u043d\u0435\u0437\u043d\u0430\u043a\u043e\u043c\u0435\u0446!&#187; \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0438\u043c\u044f \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u043c\u043e\u0433\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u2014 <code>yarn start \u0418\u0433\u043e\u0440\u044c<\/code> \u0438\u043b\u0438 <code>npm start \u0418\u0433\u043e\u0440\u044c<\/code>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/x4\/ud\/sx\/x4udsxqyfpkrv5rgqob_jy9eyow.png\" data-src=\"https:\/\/habrastorage.org\/webt\/x4\/ud\/sx\/x4udsxqyfpkrv5rgqob_jy9eyow.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 &#171;\u041f\u0440\u0438\u0432\u0435\u0442, \u0418\u0433\u043e\u0440\u044c!&#187;.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0434 \u0441\u0431\u043e\u0440\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u0430\u043a \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u044d\u0442\u043e \u0432\u0441\u0435, \u043e \u0447\u0435\u043c \u044f \u0445\u043e\u0442\u0435\u043b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u043c \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u044b \u0443\u0437\u043d\u0430\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u0438 \u043d\u0435 \u0437\u0440\u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u0440\u0435\u043c\u044f. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 happy coding!<\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<p><a href=\"https:\/\/cloud.timeweb.com\/vds-promo-10-rub?utm_source=habr&amp;utm_medium=banner&amp;utm_campaign=vds-promo-10-rub\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/co\/e2\/kh\/coe2kha8u8_pypip-2k3wk3ppa0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/co\/e2\/kh\/coe2kha8u8_pypip-2k3wk3ppa0.png\"\/><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><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\/company\/timeweb\/blog\/664582\/\"> https:\/\/habr.com\/ru\/company\/timeweb\/blog\/664582\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/4-\/hn\/8w\/4-hn8wkkaeafijehpfybkgcounq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/4-\/hn\/8w\/4-hn8wkkaeafijehpfybkgcounq.png\"\/>  <\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u0412\u0430\u043c \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0443\u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 (module bundlers) <em>JavaScript<\/em> \u0442\u0438\u043f\u0430 <a href=\"https:\/\/webpack.js.org\/\">Webpack<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/parceljs.org\/\">Parcel<\/a>, \u0447\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c, \u0442\u043e\u0433\u0434\u0430 \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0434\u043b\u044f \u0432\u0430\u0441.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435 \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043d\u0430 <a href=\"https:\/\/nodejs.org\/en\/\">Node.js<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043e\u0434\u0438\u043d \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0441 \u043a\u043e\u0434\u043e\u043c, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 <em>ES5<\/em>.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/ronami\/minipack\">\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0435\u043d\u0438\u044f<\/a>.<\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/harryheman\/Blog-Posts\/tree\/master\/nodejs-bundler\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u043a\u043e\u0434\u043e\u043c<\/a>.<\/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-332841","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/332841","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=332841"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/332841\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=332841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=332841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=332841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}