{"id":303291,"date":"2020-05-09T15:00:22","date_gmt":"2020-05-09T15:00:22","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=303291"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=303291","title":{"rendered":"\u041f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 (\u0432\u0441\u0435\u0445) \u00ab\u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0445\u00bb \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 JavaScript"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/501198\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/o1\/-i\/qe\/o1-iqeyqme6vgoqcdvfycgxjodq.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/weblogs.asp.net\/dixin\/understanding-all-javascript-module-formats-and-tools#webpack-module-bundle-from-cjs-amd-es-modules\" rel=\"nofollow\">\u00abUnderstanding (all) JavaScript module formats and tools\u00bb<\/a> \u0430\u0432\u0442\u043e\u0440\u0430 Dixin.<\/p>\n<p>  \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u0447\u0430\u0441\u0442\u0438, \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 (\u043c\u043e\u0434\u0443\u043b\u0438). \u041e\u0434\u043d\u0430\u043a\u043e JavaScript \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0438\u043c\u0435\u043b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043a \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439. \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u044f, \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438 \u0432 JavaScript.<\/p>\n<ul>\n<li><a href=\"#1\">IIFE \u043c\u043e\u0434\u0443\u043b\u044c: \u0448\u0430\u0431\u043b\u043e\u043d JS \u043c\u043e\u0434\u0443\u043b\u044f<\/a><\/li>\n<li><a href=\"#2\">\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: \u0448\u0430\u0431\u043b\u043e\u043d \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e JS \u043c\u043e\u0434\u0443\u043b\u044f<\/a><\/li>\n<li><a href=\"#3\">CJS \u043c\u043e\u0434\u0443\u043b\u044c: CommonJS \u043c\u043e\u0434\u0443\u043b\u044c \u0438\u043b\u0438 Node.js \u043c\u043e\u0434\u0443\u043b\u044c<\/a><\/li>\n<li><a href=\"#4\">AMD \u043c\u043e\u0434\u0443\u043b\u044c: \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0438\u043b\u0438 RequireJS \u043c\u043e\u0434\u0443\u043b\u044c<\/a><\/li>\n<li><a href=\"#5\">UMD \u043c\u043e\u0434\u0443\u043b\u044c: \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0438\u043b\u0438 UmdJS \u043c\u043e\u0434\u0443\u043b\u044c<\/a><\/li>\n<li><a href=\"#6\">ES \u043c\u043e\u0434\u0443\u043b\u044c: ECMAScript2015 \u0438\u043b\u0438 ES6 \u043c\u043e\u0434\u0443\u043b\u044c<\/a><\/li>\n<li><a href=\"#7\">ES \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: ECMAScript2020 \u0438\u043b\u0438 ES11 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c<\/a><\/li>\n<li><a href=\"#8\">\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: SystemJS \u043c\u043e\u0434\u0443\u043b\u044c<\/a><\/li>\n<li><a href=\"#9\">Webpack \u043c\u043e\u0434\u0443\u043b\u044c: \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0438 \u0441\u0431\u043e\u0440\u043a\u0430 CJS, AMD \u0438 ES \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/a><\/li>\n<li><a href=\"#10\">Babel \u043c\u043e\u0434\u0443\u043b\u044c: \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f ES \u043c\u043e\u0434\u0443\u043b\u044f<\/a><\/li>\n<li><a href=\"#11\">TypeScript \u043c\u043e\u0434\u0443\u043b\u044c: \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f CJS, AMD, ES \u0438 SystemJS \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/a><\/li>\n<\/ul>\n<p><a name=\"habracut\"><\/a><br \/>  <a name=\"1\"><\/a><\/p>\n<h3>IIFE \u043c\u043e\u0434\u0443\u043b\u044c: \u0448\u0430\u0431\u043b\u043e\u043d JS \u043c\u043e\u0434\u0443\u043b\u044f<\/h3>\n<p>  \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 JS, \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0435\u0435 \u043a\u0430\u043a \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0442\u0430\u043a\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0432\u043e \u0432\u0441\u0435\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 JS, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435     let count = 0     const increase = () =&gt; ++count     const reset = () =&gt; {         count = 0         console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')     }      \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435     increase()     reset() <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u044f\u0437\u043d\u0435\u043d\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0435\u043d, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<pre><code class=\"javascript\">    (() =&gt; {         let count = 0         \/\/ ...     }) <\/code><\/pre>\n<p>  \u0412\u0443\u0430\u043b\u044f, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0442. \u041e\u0434\u043d\u0430\u043a\u043e \u043a\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<h4>IIFE: \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>f<\/code>, \u0435\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>()<\/code> \u043a\u0430\u043a <code>f()<\/code>. \u0414\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>(() =&gt; {})<\/code> \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>()<\/code>. \u042d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a <code>(() =&gt; {})()<\/code>:<\/p>\n<pre><code class=\"javascript\">    (() =&gt; {         let count = 0         \/\/ ...     })() <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f IIFE (\u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c). \u041c\u043e\u0434\u0443\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c IIFE \u043c\u043e\u0434\u0443\u043b\u044c     const iifeCounterModule = (() =&gt; {         let count = 0         return {             increase: () =&gt; ++count,             reset: () =&gt; {                 count = 0                 console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')             }         }     })()      \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c IIFE \u043c\u043e\u0434\u0443\u043b\u044c     iifeCounterModule.increase()     iifeCounterModule.reset() <\/code><\/pre>\n<p>  \u041c\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u0434 \u043c\u043e\u0434\u0443\u043b\u044f \u0432 IIFE. \u0410\u043d\u043e\u043d\u0438\u043c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442. \u042d\u0442\u043e \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430. \u041f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u2014 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f (\u0438\u043b\u0438 \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u043c\u0435\u043d). \u0412\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0435\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 (\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430). \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c JS \u043c\u043e\u0434\u0443\u043b\u044f.<\/p>\n<h4>\u041f\u0440\u0438\u043c\u0435\u0441\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0430<\/h4>\n<p>  \u041f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u043c\u043e\u0434\u0443\u043b\u044f \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u2014 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f. \u0417\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u0439 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c IIFE \u043c\u043e\u0434\u0443\u043b\u044c \u0441 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438     const iifeCounterModule = ((dependencyModule1, dependencyModule2) =&gt; {         let count = 0         return {             increase: () =&gt; ++count,             reset: () =&gt; {                 count = 0                 console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')             }         }     })(dependencyModule1, dependencyModule2) <\/code><\/pre>\n<p>  \u0420\u0430\u043d\u043d\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a jQuery, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d (\u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 jQuery \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f UMD \u043c\u043e\u0434\u0443\u043b\u044c).<\/p>\n<p>  <a name=\"2\"><\/a><\/p>\n<h3>\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: \u0448\u0430\u0431\u043b\u043e\u043d \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e JS \u043c\u043e\u0434\u0443\u043b\u044f<\/h3>\n<p>  \u0428\u0430\u0431\u043b\u043e\u043d \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u0431\u044b\u043b \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d Christian Heilmann. \u042d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0442\u0430\u043a\u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f IIFE, \u043d\u043e \u0430\u043a\u0446\u0435\u043d\u0442 \u0432 \u043d\u0435\u043c \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u043a\u0430\u043a \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c     const revealingCounterModule = (() =&gt; {         let count = 0         const increase = () =&gt; ++count         const reset = () =&gt; {             count = 0             console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')         }          return {             increase,             reset         }     })()      \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c     revealingCounterModule.increase()     revealingCounterModule.reset() <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u0437\u0430 \u0447\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 (\u0438\u043b\u0438 \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442) \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441.<\/p>\n<p>  <a name=\"3\"><\/a><\/p>\n<h3>CJS \u043c\u043e\u0434\u0443\u043b\u044c: CommonJS \u043c\u043e\u0434\u0443\u043b\u044c \u0438\u043b\u0438 Node.js \u043c\u043e\u0434\u0443\u043b\u044c<\/h3>\n<p>  CommonJS, \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u043d\u044b\u0439 ServerJS, \u044d\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u041e\u043d \u0432\u0441\u0442\u0440\u043e\u0435\u043d \u0432 Node.js. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043a\u0430\u0436\u0434\u044b\u0439 JS \u0444\u0430\u0439\u043b \u2014 \u044d\u0442\u043e CJS. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <code>module<\/code> \u0438 <code>exports<\/code> \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043c\u043e\u0434\u0443\u043b\u044f (\u0444\u0430\u0439\u043b\u0430). \u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>require<\/code> \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u043d\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 CommonJS:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c CommonJS \u043c\u043e\u0434\u0443\u043b\u044c: commonJSCounterModule.js     const dependencyModule1 = require('.\/dependencyModule1')     const dependencyModule2 = require('.\/dependencyModule2')      let count = 0     const increase = () =&gt; ++count     const reset = () =&gt; {         count = 0         console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')     }      exports.increase = increase     exports.reset = reset     \/\/ \u0438\u043b\u0438 (\u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u043e)     module.exports = {         increase,         reset     } <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c CommonJS \u043c\u043e\u0434\u0443\u043b\u044c     const {         increase,         reset     } = require('.\/commonJSCounterModule')     increase()     reset()     \/\/ \u0438\u043b\u0438     const commonJSCounterModule = require('.\/commonJSCounterModule')     commonJSCounterModule.increase()     commonJSCounterModule.reset() <\/code><\/pre>\n<p>  \u0412 \u0441\u0440\u0435\u0434\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (\u0434\u0432\u0438\u0436\u043a\u0435) Node.js \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0435\u043c \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0430\u0439\u043b\u0430 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <code>exports, module<\/code> \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>require<\/code>:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c CommonJS \u043c\u043e\u0434\u0443\u043b\u044c     (function(exports, require, module, __filename, __dirname) {         const dependencyModule1 = require('.\/dependencyModule1')         const dependencyModule2 = require('.\/dependencyModule2')          let count = 0         const increase = () =&gt; ++count         const reset = () =&gt; {             count = 0             console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')         }          module.exports = {             increase,             reset         }          return module.exports     }).call(thisValue, exports, require, module, filename, dirname)      \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c CommonJS \u043c\u043e\u0434\u0443\u043b\u044c     (function(exports, require, module, __filename, __dirname) {         const commonJSCounterModule = require('.\/commonJSCounterModule')         commonJSCounterModule.increase()         commonJSCounterModule.reset()     }).call(thisValue, exports, require, module, filename, dirname) <\/code><\/pre>\n<p>  <a name=\"4\"><\/a><\/p>\n<h3>AMD \u043c\u043e\u0434\u0443\u043b\u044c \u0438\u043b\u0438 RequireJS \u043c\u043e\u0434\u0443\u043b\u044c<\/h3>\n<p>  AMD (<a href=\"https:\/\/github.com\/amdjs\/amdjs-api\" rel=\"nofollow\">\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f<\/a>) \u2014 \u044d\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 <a href=\"https:\/\/requirejs.org\/\" rel=\"nofollow\">RequireJS<\/a>. AMD \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>define<\/code> \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c AMD \u043c\u043e\u0434\u0443\u043b\u044c     define('amdCounterModule', ['dependencyModule1', 'dependencyModule2'], (dependencyModule1, dependencyModule2) =&gt; {         let count = 0         const increase = () =&gt; ++count         const reset = () =&gt; {             count = 0             console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')         }          return {             increase,             reset         }     }) <\/code><\/pre>\n<p>  \u041e\u043d \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>require<\/code> \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c AMD \u043c\u043e\u0434\u0443\u043b\u044c     require(['amdCounterModule'], amdCounterModule =&gt; {         amdCounterModule.increase()         amdCounterModule.reset()     })  <\/code><\/pre>\n<p>  <code>require<\/code> AMD \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 <code>require<\/code> CommonJS \u0442\u0435\u043c, \u0447\u0442\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438 \u0441\u0430\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u0438.<\/p>\n<h4>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430<\/h4>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>define<\/code> \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u043f\u043e\u0445\u043e\u0436\u0443\u044e \u043d\u0430 CommonJS <code>require<\/code> \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0412\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 require \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 AMD \u043c\u043e\u0434\u0443\u043b\u044c     define(require =&gt; {         const dynamicDependencyModule1 = require('dependencyModule1')         const dynamicDependencyModule2 = require('dependencyModule2')          let count = 0         const increase = () =&gt; ++count         const reset = () =&gt; {             count = 0             console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')         }          return {             increase,             reset         }     }) <\/code><\/pre>\n<p>  <\/p>\n<h4>AMD \u043c\u043e\u0434\u0443\u043b\u044c \u0438\u0437 CommonJS \u043c\u043e\u0434\u0443\u043b\u044f<\/h4>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u0430\u044f \u0432\u044b\u0448\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>define<\/code>, \u043a\u0440\u043e\u043c\u0435 <code>require<\/code>, \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <code>exports<\/code> \u0438 <code>module<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 <code>define<\/code> \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043a\u043e\u0434 \u0438\u0437 CommonJS:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c AMD \u043c\u043e\u0434\u0443\u043b\u044c \u0441 CommonJS \u043a\u043e\u0434\u043e\u043c     define((require, exports, module) =&gt; {         \/\/ CommonJS \u043a\u043e\u0434         const dependencyModule1 = require('dependencyModule1')         const dependencyModule2 = require('dependencyModule2')          let count = 0         const increase = () =&gt; ++count         const reset = () =&gt; {             count = 0             console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')         }          exports.increase = increase         exports.reset = reset     })      \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c AMD \u043c\u043e\u0434\u0443\u043b\u044c \u0441 CommonJS \u043a\u043e\u0434\u043e\u043c     define(require =&gt; {         \/\/ CommonJS \u043a\u043e\u0434         const counterModule = require('amdCounterModule')         counterModule.increase()         counterModule.reset()     }) <\/code><\/pre>\n<p>  <a name=\"5\"><\/a><\/p>\n<h3>UMD \u043c\u043e\u0434\u0443\u043b\u044c: \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0438\u043b\u0438 UmdJS \u043c\u043e\u0434\u0443\u043b\u044c<\/h3>\n<p>  UMD (<a href=\"https:\/\/github.com\/umdjs\/umd\" rel=\"nofollow\">\u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f<\/a>) \u2014 \u043d\u0430\u0431\u043e\u0440 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u043e\u0434\u0443\u043b\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0430\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f.<\/p>\n<h4>UMD \u0434\u043b\u044f AMD (RequireJS) \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/h4>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u043c\u043e\u0434\u0443\u043b\u044f \u043a\u0430\u043a \u0432 AMD (RequireJS), \u0442\u0430\u043a \u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c UMD \u043c\u043e\u0434\u0443\u043b\u044c \u0434\u043b\u044f AMD (RequireJS) \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430     ((root, factory) =&gt; {         \/\/ \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e define AMD\/RequireJS         if (typeof define === 'function' &amp;&amp; define.amd) {             \/\/ \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441 \u0435\u0435 \u043f\u043e\u043c\u043e\u0449\u044c\u044e             define('umdCounterModule', ['dependencyModule1', 'dependencyModule2'], factory)         } else {             \/\/ \u0435\u0441\u043b\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e             \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Window)             \/\/ \u043a\u0430\u043a \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c             root.umdCounterModule = factory(root.dependencyModule1, root.dependencyModule2)         }     })(typeof self !== undefined ? self : this, (dependencyModule1, dependencyModule2) =&gt; {         \/\/ \u043a\u043e\u0434 \u043c\u043e\u0434\u0443\u043b\u044f         let count = 0         const increase = () =&gt; ++count         const reset = () =&gt; {             count = 0             console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d')         }          return {             increase,             reset         }     }) <\/code><\/pre>\n<p>  \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u043e\u0436\u043d\u043e, \u043d\u043e \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c IIFE. \u0410\u043d\u043e\u043d\u0438\u043c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>define<\/code> \u0438\u0437 AMD\/RequireJS.<\/p>\n<ul>\n<li>\u0415\u0441\u043b\u0438 <code>define<\/code> \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0430, \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u0435.<\/li>\n<li>\u0415\u0441\u043b\u0438 <code>define<\/code> \u043d\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0430, \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e. \u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 <code>root<\/code> \u2014 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 Window \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041e\u043d \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0438\u0437 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 (\u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Window). \u041a\u043e\u0433\u0434\u0430 <code>factory<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c, \u043e\u043d \u0442\u0430\u043a\u0436\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Window).<\/li>\n<\/ul>\n<p>  <\/p>\n<h4>UMD \u0434\u043b\u044f AMD (RequireJS) \u0438 CommonJS (Node.js)<\/h4>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u043c\u043e\u0434\u0443\u043b\u044f \u043a\u0430\u043a \u0432 AMD (RequireJS), \u0442\u0430\u043a \u0438 \u0432 CommonJS (Node.js):<\/p>\n<pre><code class=\"javascript\">    (define =&gt; define((require, exports, module) =&gt; {         \/\/ \u043a\u043e\u0434 \u043c\u043e\u0434\u0443\u043b\u044f         const dependencyModule1 = require(&quot;dependencyModule1&quot;)         const dependencyModule2 = require(&quot;dependencyModule2&quot;)          let count = 0         const increase = () =&gt; ++count         const reset = () =&gt; {             count = 0             console.log(&quot;Count is reset.&quot;)         }          module.export = {             increase,             reset         }     }))( \/\/ \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 module \u0438 exports \u0438\u0437 CommonJS\/Node.js         \/\/ \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e define \u0438\u0437 AMD\/RequireJS         typeof module === 'object' &amp;&amp; module.exports &amp;&amp; typeof define !== 'function'             ? \/\/ CommonJS\/Node.js. \u0412\u0440\u0443\u0447\u043d\u0443\u044e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e define                 factory =&gt; module.exports = factory(require, exports, module)             : \/\/ AMD\/RequireJS. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e define                 define) <\/code><\/pre>\n<p>  \u041d\u0435 \u043f\u0443\u0433\u0430\u0439\u0442\u0435\u0441\u044c, \u044d\u0442\u043e \u0441\u043d\u043e\u0432\u0430 \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c IIFE. \u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u00ab\u043e\u0446\u0435\u043d\u043a\u0430\u00bb \u0435\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430. \u041e\u0446\u0435\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0440\u0435\u0434\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f (\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 <code>module<\/code> \u0438 <code>exports<\/code> \u0438\u0437 CommonJS\/Node.js, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>define<\/code> \u0438\u0437 AMD\/RequireJS).<\/p>\n<ul>\n<li>\u0415\u0441\u043b\u0438 \u0441\u0440\u0435\u0434\u043e\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f CommonJS\/Node.js, \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>define<\/code>.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0441\u0440\u0435\u0434\u043e\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f AMD\/RequireJS, \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>define<\/code> \u0438\u0437 \u044d\u0442\u043e\u0439 \u0441\u0440\u0435\u0434\u044b. \u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>define<\/code>. \u0412\u043d\u0443\u0442\u0440\u0438 \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>define<\/code>.<\/li>\n<\/ul>\n<p>  <a name=\"6\"><\/a><\/p>\n<h3>ES \u043c\u043e\u0434\u0443\u043b\u044c: ECMAScript2015 \u0438\u043b\u0438 ES6 \u043c\u043e\u0434\u0443\u043b\u044c<\/h3>\n<p>  \u0412 2015 \u0433\u043e\u0434\u0443 \u0432 6 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 JS \u0431\u044b\u043b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441. \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 ECMAScript 2015 (ES2015) \u0438\u043b\u0438 ECMAScript 6 (ES6). \u041e\u0441\u043d\u043e\u0432\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u2014 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 <code>import<\/code> \u0438 <code>export<\/code>. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0438\u0440\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 ES \u043c\u043e\u0434\u0443\u043b\u044f \u0434\u043b\u044f \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0438 \u00ab\u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0433\u043e\u00bb (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) \u0438\u043c\u043f\u043e\u0440\u0442\u0430\/\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c ES \u043c\u043e\u0434\u0443\u043b\u044c: esCounterModule.js \u0438\u043b\u0438 esCounterModule.mjs     import dependencyModule1 from '.\/dependencyModule1.mjs'     import dependencyModule2 from '.\/dependencyModule2.mjs'      let count = 0     \/\/ \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044d\u043a\u0441\u043f\u043e\u0440\u0442     export const increase = () =&gt; ++count     export const reset = () =&gt; {         count = 0         console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')     }     \/\/ \u0438\u043b\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e     export default {         increase,         reset     } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0435\u0433 <code>&lt;script&gt;<\/code> \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u043a \u043c\u043e\u0434\u0443\u043b\u044c: <code>&lt;script type=&quot;module&quot; src=&quot;esCounterModule.js&quot;&gt;&lt;\/script&gt;<\/code>. \u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u0432 Node.js \u043c\u0435\u043d\u044f\u0435\u043c \u0435\u0433\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u043d\u0430 <code>.mjs<\/code>:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 ES \u043c\u043e\u0434\u0443\u043b\u044f     \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u0437 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430     import {         increase,         reset     } from '.\/esCounterModule.mjs'     increase()     reset()     \/\/ \u0438\u043b\u0438 \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u0437 \u044d\u043a\u043f\u043e\u0440\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e     import esCounterModule from '.\/esCounterModule.mjs'     esCounterModule.increase()     esCounterModule.reset() <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0435\u0433 <code>&lt;script&gt;<\/code> \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>nomodule<\/code>:<\/p>\n<pre>     &lt;script nomodule&gt;         alert('\u041d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f.')     &lt;\/script&gt; <\/pre>\n<p>  <a name=\"7\"><\/a><\/p>\n<h3>ES \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: ECMAScript2020 \u0438\u043b\u0438 ES11 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c<\/h3>\n<p>  \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 11 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 JS 2020 \u0433\u043e\u0434\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>import<\/code> \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f ES \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u0414\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u043c\u0438\u0441, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u043c\u043e\u0436\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>then<\/code>:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 ES \u043c\u043e\u0434\u0443\u043b\u044c \u0441 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u043f\u0440\u043e\u043c\u0438\u0441\u043e\u0432, \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u0437 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430     import('.\/esCounterModule.js').then(({         increase,         reset     }) =&gt; {         increase()         reset()     })     \/\/ \u0438\u043b\u0438 \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u0437 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e     import('.\/esCounterModule.js').then(dynamicESCounterModule =&gt; {         dynamicESCounterModule.increase()         dynamicESCounterModule.reset()     }) <\/code><\/pre>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>import<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u043c\u0438\u0441, \u0432 \u043d\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e <code>await<\/code>:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 ES \u043c\u043e\u0434\u0443\u043b\u044c \u0441 async\/await     (async () =&gt; {         \/\/ \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u0437 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430         const {             increase,             reset         } = await import('.\/esCounterModule.js')         increase()         reset()          \/\/ \u0438\u043b\u0438 \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u0437 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e         const dynamicESCounterModule = await import('.\/esCounterModule.js')         dynamicESCounterModule.increase()         dynamicESCounterModule.reset()     }) <\/code><\/pre>\n<p>  <a name=\"8\"><\/a><\/p>\n<h3>\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: SystemJS \u043c\u043e\u0434\u0443\u043b\u044c<\/h3>\n<p>  SystemJS \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ES \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 ES6:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c ES \u043c\u043e\u0434\u0443\u043b\u044c     import dependencyModule1 from &quot;.\/dependencyModule1.js&quot;     import dependencyModule2 from &quot;.\/dependencyModule2.js&quot;     dependencyModule1.api1()     dependencyModule2.api2()      let count = 0     \/\/ \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044d\u043a\u0441\u043f\u043e\u0440\u0442     export const increase = function() {         return ++count     }     export const reset = function() {         count = 0         console.log(&quot;Count is reset.&quot;)     }     \/\/ \u0438\u043b\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e     export default {         increase,         reset     } <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 ES6. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0434\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u043a\u043e\u0434\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 <code>System.register<\/code> \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 SystemJS:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c SystemJS \u043c\u043e\u0434\u0443\u043b\u044c     System.register(['.\/dependencyModule1', '.\/dependencyModule2'], function(exports_1, context_1) {         'use strict'         var dependencyModule1_js_1, dependencyModule2_js_1, count, increase, reset         var __moduleName = context_1 &amp;&amp; context_1.id         return {             setters: [                 function(dependencyModule1_js_1_1) {                     dependencyModule1_js_1 = dependencyModule1_js_1_1                 },                 function(dependencyModule2_js_1_1) {                     dependencyModule2_js_1 = dependencyModule2_js_1_1                 }             ],             execute: function() {                 dependencyModule1_js_1.default.api1()                 dependencyModule2_js_1.default.api2()                 count = 0                 \/\/ \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044d\u043a\u0441\u043f\u043e\u0440\u0442                 exports_1('increase', increase = function() {                     return ++count                 })                 exports_1('reset', reset = function() {                     count = 0                     console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')                 })                 \/\/ \u0438\u043b\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e                 exports_1('default', {                     increase,                     reset                 })             }         }     }) <\/code><\/pre>\n<p>  \u041d\u043e\u0432\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 ES6 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0442. \u0417\u0430\u0442\u043e \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u042d\u0442\u0430 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webpack, TypeScript \u0438 \u0442.\u0434.<\/p>\n<h4>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043c\u043e\u0434\u0443\u043b\u044f<\/h4>\n<p>  SystemJS \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>import<\/code> \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c SystemJS \u043c\u043e\u0434\u0443\u043b\u044c \u0441 \u043f\u0440\u043e\u043c\u0438\u0441\u0430\u043c\u0438     System.import('.\/esCounterModule.js').then(dynamicESCounterModule =&gt; {         dynamicESCounterModule.increase()         dynamicESCounterModule.reset()     }) <\/code><\/pre>\n<p>  <a name=\"9\"><\/a><\/p>\n<h3>Webpack \u043c\u043e\u0434\u0443\u043b\u044c: \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0438 \u0441\u0431\u043e\u0440\u043a\u0430 CJS, AMD \u0438 ES \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/h3>\n<p>  Webpack \u2014 \u044d\u0442\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u0415\u0433\u043e \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 CommonJS, AMD \u0438 ES \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 \u0441\u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 3 \u0444\u0430\u0439\u043b\u0430\u0445 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f 3 \u043c\u043e\u0434\u0443\u043b\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c AMD \u043c\u043e\u0434\u0443\u043b\u044c: amdDependencyModule1.js     define('amdDependencyModule1', () =&gt; {         const api1 = () =&gt; {}         return {             api1         }     })      \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c CommonJS \u043c\u043e\u0434\u0443\u043b\u044c: commonJSDependencyModule2.js     const dependencyModule2 = require('.\/commonJSDependencyModule2')     const api2 = () =&gt; dependencyModule1.api1()     exports.api2 = api2      \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c ES \u043c\u043e\u0434\u0443\u043b\u044c: esCounterModule.js     import dependencyModule1 from '.\/amdDependencyModule1'     import dependencyModule2 from '.\/commonJSDependencyModule2'      let count = 0     const increase = () =&gt; ++count     const reset = () =&gt; {         count = 0         console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')     }      export default {         increase,         reset     } <\/code><\/pre>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 ES \u043c\u043e\u0434\u0443\u043b\u044f: index.js     import counterModule from '.\/esCounterModule'     counterModule.increase()     counterModule.reset() <\/code><\/pre>\n<p>  Webpack \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b <code>main.js<\/code>:<\/p>\n<pre>     root         dist             main.js (\u0441\u0431\u043e\u0440\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u043f\u0430\u043f\u043a\u0435 src)         src             amdDependencyModule1.js             commonJSDependencyModule2.js             esCounterModule.js             index.js         webpack.config.js <\/pre>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Webpack \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 Node.js, \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 CommonJS. \u0412 <code>webpack.config.js<\/code>:<\/p>\n<pre><code class=\"javascript\">    const path = require('path')      module.exports = {         entry: '.\/src\/index.js',         mode: 'none', \/\/ \u043d\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043d\u0435 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0432 \u0446\u0435\u043b\u044f\u0445 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438         output: {             filename: 'main.js',             path: path.resolve(__dirname, 'dist'),         },     } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<pre>     npm install webpack webpack-cli --save-dev     npx webpack --config webpack.config.js <\/pre>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 Webpack \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0444\u0430\u0439\u043b <code>main.js<\/code>. \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 \u0438\u0437 <code>main.js<\/code> \u043e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"javascript\">    (function(modules) { \/\/ \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f Webpack         \/\/ \u043a\u044d\u0448 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439         var installedModules = {}         \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f require         function require(moduleId) {             \/\/ \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0435\u0441\u0442\u044c \u043b\u0438 \u043c\u043e\u0434\u0443\u043b\u044c \u0432 \u043a\u044d\u0448\u0435             if (installedModules[moduleId]) {                 return installedModules[moduleId].exports             }             \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u043a\u044d\u0448             var module = installedModules[moduleId] = {                 i: moduleId,                 l: false,                 exports: {}             }             \/\/ \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e module             modules[moduleId].call(module.exports, module, module.exports, require)             \/\/ \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c \u043a\u0430\u043a \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0439             module.l = true             \/\/ \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e exports \u043c\u043e\u0434\u0443\u043b\u044f             return module.exports         }          \/\/ \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 modules (__webpack_modules__)         require.m = modules         \/\/ \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u044d\u0448 \u0441 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438         require.c = installedModules         \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0433\u0435\u0442\u0442\u0435\u0440 \u0434\u043b\u044f \u0441\u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430         require.d = function(exports, name, getter) {             if (!require.o(exports, name)) {                 Object.defineProperty(exports, name, {                     enumerable: true,                     get: getter                 })             }         }         \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c __esModule \u0432 exports         require.r = function(exports) {             if (typeof Symbol !== 'undefined' &amp;&amp; Symbol.toStringTag) {                 Object.defineProperty(exports, Symbol.toStringTag, {                     value: 'Module'                 })             }             Object.defineProperty(exports, '__esModule', {                 value: true             })         }         \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0435\u043d         \/\/ mode &amp; 1: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 - \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043c\u043e\u0434\u0443\u043b\u044f, \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e         \/\/ mode &amp; 2: \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 ns (namespace)         \/\/ mode &amp; 4: \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u043e\u0431\u044a\u0435\u043a\u0442 ns \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442         \/\/ mode &amp; 8|1: \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e require         require.t = function(value, mode) {             if (mode &amp; 1) value = require(value)             if (mode &amp; 8) return value             if ((mode &amp; 4) &amp;&amp; typeof value === 'object' &amp;&amp; value &amp;&amp; value.__esModule) return value             var ns = Object.create(null)             require.r(ns)             Object.defineProperty(ns, 'default', {                 enumerable: true,                 value: value             })             if (mode &amp; 2 &amp;&amp; typeof value !== 'string')                 for (var key in value) require.d(ns, key, function(key) {                     return value[key]                 }.bind(null, key))             return ns         }         \/\/ \u0444\u0443\u043a\u043d\u0446\u0438\u044f getDefaultExport \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0441 \u043d\u0435\u0441\u0431\u0430\u043b\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438         require.n = function(module) {             var getter = module &amp;&amp; module.__esModule ?                 function getDefault() {                     return module['default']                 } :                 function getModuleExports() {                     return module                 }             require.d(getter, 'a', getter)             return getter         }         \/\/ Object.prototype.hasOwnProperty.call         require.o = function(object, property) {             return Object.prototype.hasOwnProperty.call(object, property)         }         \/\/ __webpack_public_path__         require.p = ''         \/\/ \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c exports         return require(require.s = 0)     })([         function(module, exports, require) {             'use strict'             require.r(exports)             \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ES \u043c\u043e\u0434\u0443\u043b\u044c: index.js             var esCounterModule = require(1)             esCounterModule['default'].increase()             esCounterModule['default'].reset()         },         function(module, exports, require) {             'use strict'             require.r(exports)             \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c ES \u043c\u043e\u0434\u0443\u043b\u044c: esCounterModule.js             var amdDependencyModule1 = require.n(require(2))             var commonJSDependencyModule2 = require.n(require(3))             amdDependencyModule1.a.api1()             commonJSDependencyModule2.a.api2()              let count = 0             const increase = () =&gt; ++count             const reset = () =&gt; {                 count = 0                 console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')             }              exports['default'] = {                 increase,                 reset             }         },         function(module, exports, require) {             var result!(result = (() =&gt; {                     \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c AMD \u043c\u043e\u0434\u0443\u043b\u044c: amdDependencyModule1.js                     const api1 = () =&gt; {}                     return {                         api1                     }                 }).call(exports, require, exports, module),                 result !== undefined &amp;&amp; (module.exports = result))         },         function(module, exports, require) {             \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c CommonJS \u043c\u043e\u0434\u0443\u043b\u044c: commonJSDependencyModule2.js             const dependencyModule1 = require(2)             const api2 = () =&gt; dependencyModule1.api1()             exports.api2 = api2         }     ]) <\/code><\/pre>\n<p>  \u0418 \u0441\u043d\u043e\u0432\u0430 \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c IIFE. \u041a\u043e\u0434 \u0438\u0437 4 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 4 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0418 \u044d\u0442\u043e\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430.<\/p>\n<p>  <a name=\"10\"><\/a><\/p>\n<h3>Babel \u043c\u043e\u0434\u0443\u043b\u044c: \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f ES \u043c\u043e\u0434\u0443\u043b\u044f<\/h3>\n<p>  Babel \u2014 \u044d\u0442\u043e \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ES6+ \u043a\u043e\u0434\u0430 \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435 ES6+ \u043c\u043e\u0434\u0443\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d \u0432 Babel \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0448\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">    \/\/ Babel     Object.defineProperty(exports, '__esModule', {         value: true     })     exports['default'] = void 0      function _interopRequireDefault(obj) {         return obj &amp;&amp; obj.__esModule ? obj : {             'default': obj         }     }      \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c ES \u043c\u043e\u0434\u0443\u043b\u044c: esCounterModule.js     var dependencyModule1 = _interopRequireDefault(require('.\/amdDependencyModule1'))     var dependencyModule2 = _interopRequireDefault(require('.\/commonJSDependencyModule2'))     dependencyModule1['default'].api1()     dependencyModule2['default'].api2()      var count = 0     var increase = function() {         return ++count     }     var reset = function() {         count = 0         console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')     }      exports['default'] = {         increase: increase,         reset: reset     } <\/code><\/pre>\n<p>  \u0410 \u0432\u043e\u0442 \u043a\u043e\u0434 \u0432 <code>index.js<\/code>, \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<pre><code class=\"javascript\">    \/\/ Babel     function _interopRequireDefault(obj) {         return obj &amp;&amp; obj.__esModule ? obj : {             'default': obj         }     }      \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ES \u043c\u043e\u0434\u0443\u043b\u044c: index.js     var esCounterModule = _interopRequireDefault(require('.\/esCounterModule.js'))     esCounterModule['default'].increase()     esCounterModule['default'].reset() <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. Babel \u0442\u0430\u043a\u0436\u0435 \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<h4>Babel \u0438 SystemJS<\/h4>\n<p>  SystemJS \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f Babel:<\/p>\n<pre>     npm install --save-dev @babel\/plugin-transform-modules-systemjs <\/pre>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0432 <code>babel.config.json<\/code>:<\/p>\n<pre>     {         'plugins': ['@babel\/plugin-transform-modules-systemjs'],         'presets': [             [             '@babel\/env',                 {                     'targets': {                         'ie': '11'                     }                 }             ]         ]     } <\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c Babel \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 SystemJS \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438 CommonJS\/Node.js, AMD\/RequireJS \u0438 ES \u043c\u043e\u0434\u0443\u043b\u0435\u0439:<\/p>\n<pre>     npx babel src --out-dir lib <\/pre>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<pre>     root         lib             amdDependencyModule1.js (\u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e SystemJS)             commonJSDependencyModule2.js (\u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e SystemJS)             esCounterModule.js (\u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e SystemJS)             index.js (\u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e SystemJS)         src             amdDependencyModule1.js             commonJSDependencyModule2.js             esCounterModule.js             index.js         babel.config.json <\/pre>\n<p>  \u0412\u0435\u0441\u044c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 AMD, CommonJS \u0438 ES \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 SystemJS:<\/p>\n<pre><code class=\"javascript\">    \/\/ \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c AMD\/RequireJS \u043c\u043e\u0434\u0443\u043b\u044c \u0432 SystemJS \u043c\u043e\u0434\u0443\u043b\u044c: lib\/amdDependencyModule1.js     System.register([], function(_export, _context) {         'use strict'         return {             setters: [],             execute: function() {                 \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c AMD \u043c\u043e\u0434\u0443\u043b\u044c: src\/amdDependencyModule1.js                 define('amdDependencyModule1', () =&gt; {                     const api1 = () =&gt; {}                      return {                         api1                     }                 })             }         }     })      \/\/ \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c CommonJS\/Node.js \u043c\u043e\u0434\u0443\u043b\u044c \u0432 SystemJS \u043c\u043e\u0434\u0443\u043b\u044c: lib\/commonJSDependencyModule2.js.     System.register([], function(_export, _context) {         'use strict'         var dependencyModule1, api2         return {             setters: [],             execute: function() {                 \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c CommonJS \u043c\u043e\u0434\u0443\u043b\u044c: src\/commonJSDependencyModule2.js                 dependencyModule1 = require('.\/amdDependencyModule1')                  api2 = () =&gt; dependencyModule1.api1()                  exports.api2 = api2             }         }     })      \/\/ \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c ES \u043c\u043e\u0434\u0443\u043b\u044c \u0432 SystemJS \u043c\u043e\u0434\u0443\u043b\u044c     System.register(['.\/amdDependencyModule1', '.\/commonJSDependencyModule2'], function(_export, _context) {         var dependencyModule1, dependencyModule2, count, increase, reset         return {             setters: [function(_amdDependencyModule) {                 dependencyModule1 = _amdDependencyModule.default             }, function(_commonJSDependencyModule) {                 dependencyModule2 = _commonJSDependencyModule.default             }],             execute: function() {                 \/\/ \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c ES \u043c\u043e\u0434\u0443\u043b\u044c: src\/esCounterModule.js                 dependencyModule1.api1()                 dependencyModule1.api2()                 count = 0                  increase = () =&gt; ++count                  reset = () =&gt; {                     count = 0                     console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')                 }                  _export('default', {                     increase,                     reset                 })             }         }     })      \/\/ \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c ES \u043c\u043e\u0434\u0443\u043b\u044c \u0432 SystemJS \u043c\u043e\u0434\u0443\u043b\u044c: lib\/index.js     System.register(['.\/esCounterModule'], function(_export, _context) {         var esCounterModule         return {             setters: [function(_esCounterModule) {                 esCounterModule = _esCounterModule.default             }],             execute: function() {                 \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ES \u043c\u043e\u0434\u0443\u043b\u044c: src\/index.js                 esCounterModule.increase()                 esCounterModule.reset()             }         }     }) <\/code><\/pre>\n<p>  <a name=\"11\"><\/a><\/p>\n<h3>TypeScript \u043c\u043e\u0434\u0443\u043b\u044c: \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f CJS, AMD, ES \u0438 SystemJS \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/h3>\n<p>  TypeScript \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0440\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 JS, \u0432\u043a\u043b\u044e\u0447\u0430\u044f ES6. \u041f\u0440\u0438 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 ES6 \u043c\u043e\u0434\u0443\u043b\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d \u0438\u043b\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 CommonJS\/NOde.js, AMD\/RequireJS, UMD\/UmdJS \u0438\u043b\u0438 SystemJS \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0432 <code>tsconfig.json<\/code>:<\/p>\n<pre>     {         'compilerOptions': {             'module': 'ES2020' \/\/ None, CommonJS, AMD, System,             UMD, ES6, ES2015, ESNext         }     } <\/pre>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">    \/\/ TypeScript \u0438 ES \u043c\u043e\u0434\u0443\u043b\u044c     \/\/ \u0441 compilerOptions: { module: 'ES6' }. \u0422\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430     import dependencyModule from '.\/dependencyModule'     dependencyModule.api()     let count = 0     export const increase = function() {         return ++count     }      \/\/ \u0441 compilerOptions: { module: 'CommonJS' }. \u0422\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c \u0432 CommonJS\/Node.js \u043c\u043e\u0434\u0443\u043b\u044c     var __importDefault = (this &amp;&amp; this.__importDefault) || function(mod) {         return (mod &amp;&amp; mod.__esModule) ? mod : {             'default': mod         }     }     exports.__esModule = true      var dependencyModule_1 = __importDefault(require('.\/dependencyModule'))     dependencyModule_1['default'].api()     var count = 0     exports.increase = function() {         return ++count     }      \/\/ \u0441 compilerOptions: { module: 'AMD' }. \u0422\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c \u0432 AMD\/RequireJS \u043c\u043e\u0434\u0443\u043b\u044c     var __importDefault = (this &amp;&amp; this.__importDefault) || function(mod) {         return (mod &amp;&amp; mod.__esModule) ? mod : {             'default': mod         }     }     define(['require', 'exports', '.\/dependencyModule'], function(require, exports, dependencyModule_1) {         'use strict'         exports.__esModule = true          dependencyModule_1 = __importDefault(dependencyModule_1)         dependencyModule_1['default'].api()         var count = 0         exports.increase = function() {             return ++count         }     })      \/\/ \u0441 compilerOptions: { module: 'UMD' }. \u0422\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c \u0432 UMD\/UmdJS \u043c\u043e\u0434\u0443\u043b\u044c     var __importDefault = (this &amp; this.__importDefault) || function(mod) {             return (mod &amp;&amp; mod.__esModule) ? mod : {                 'default': mod             }         }         (function(factory) {             if (typeof module === 'object' &amp;&amp; typeof module.exports === 'object') {                 var v = factory(require, exports)                 if (v !== undefined) module.exports = v             } else if (typeof define === 'function' &amp;&amp; define.amd) {                 define(['require', 'exports', '.\/dependencyModule'], factory)             }         })(function(require, exports) {             'use strict'             exports.__esModule = true              var dependencyModule_1 = __importDefault(require('.\/dependencyModule'))             dependencyModule_1['default'].api()             var count = 0             exports.increase = function() {                 return ++count             }         })      \/\/ \u0441 compilerOptions: { module: 'System' }. \u0422\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u043c \u0432 System\/SystemJS \u043c\u043e\u0434\u0443\u043b\u044c     System.register(['.\/dependencyModule'], function(exports_1, context_1) {         'use strict'         var dependencyModule_1, count, increase         car __moduleName = context_1 &amp;&amp; context_1.id         return {             setters: [                 function(dependencyModule_1_1) {                     dependencyModule_1 = dependencyModule_1_1                 }             ],             execute: function() {                 dependencyModule_1['default'].api()                 count = 0                 exports_1('increase', increase = function() {                     return ++count                 })             }         }     }) <\/code><\/pre>\n<p>  \u041c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 ES, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0439 TypeScript, \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439.<\/p>\n<h4>\u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0438 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u043c\u0435\u043d<\/h4>\n<p>  TypeScript \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430 <code>module<\/code> \u0438 <code>namespace<\/code>. \u041e\u043d\u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438:<\/p>\n<pre><code class=\"javascript\">    module Counter {         let count = 0         export const increase = () =&gt; ++count         export const reset = () =&gt; {             count = 0             console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')         }     }      namespace Counter {         let count = 0         export const increase = () =&gt; ++count         export const reset = () =&gt; {             count = 0             console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')         }     } <\/code><\/pre>\n<p>  \u041e\u0431\u0430 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 JS \u043e\u0431\u044a\u0435\u043a\u0442\u044b:<\/p>\n<pre><code class=\"javascript\">    var Counter(function(Counter) {         var count = 0         Counter.increase = function() {             return ++count         }         Counter.reset = function() =&gt; {             count = 0             console.log('\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u0441\u0431\u0440\u043e\u0448\u0435\u043d.')         }     })(Counter || (Counter = {})) <\/code><\/pre>\n<p>  TypeScript module \u0438 namespace \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u044c <code>.<\/code>:<\/p>\n<pre><code class=\"javascript\">    module Counter.Sub {         let count = 0         export const increase = () =&gt; ++count     }      namespace Counter.Sub {         let count = 0         export const increase = () =&gt; ++count     } <\/code><\/pre>\n<p>  Sub module \u0438 sub namespace \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">    var Counter(function(Counter) {         var Sub(function(Sub) {             var count = 0             Sub.increase = function() {                 return ++count             }         })(Sub = Counter.Sub || (Counter.Sub = {}))     })(Counter || (Counter = {})) <\/code><\/pre>\n<p>  TypeScript module \u0438 namespace \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0435 <code>export<\/code>:<\/p>\n<pre><code class=\"javascript\">    module Counter {         let count = 0         export module Sub {             export const increase = () =&gt; ++count         }     }      module Counter {         let count = 0         export namespace Sub {             export const increase = () =&gt; ++count         }     } <\/code><\/pre>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0442\u0430\u043a\u0436\u0435 \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 sub module \u0438 sub namespace:<\/p>\n<pre><code class=\"javascript\">    var Counter     (function(Counter) {         var count = 0         var Sub         (function(Sub) {             Sub.increase = function() {                 return ++count             }         })(Sub = Counter.Sub || (Counter.Sub = {}))     })(Counter || (Counter = {})) <\/code><\/pre>\n<p>  <\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u0414\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u0432 JS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u0435\u0435\u0442 10+ \u0441\u0438\u0441\u0442\u0435\u043c\/\u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u043c\u043e\u0434\u0443\u043b\u044f\u0446\u0438\u0438\/\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438\u043c\u0435\u043d:<\/p>\n<ul>\n<li>IIFE \u043c\u043e\u0434\u0443\u043b\u044c: \u0448\u0430\u0431\u043b\u043e\u043d JS \u043c\u043e\u0434\u0443\u043b\u044f<\/li>\n<li>\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: \u0448\u0430\u0431\u043b\u043e\u043d \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e JS \u043c\u043e\u0434\u0443\u043b\u044f<\/li>\n<li>CJS \u043c\u043e\u0434\u0443\u043b\u044c: CommonJS \u043c\u043e\u0434\u0443\u043b\u044c \u0438\u043b\u0438 Node.js \u043c\u043e\u0434\u0443\u043b\u044c<\/li>\n<li>AMD \u043c\u043e\u0434\u0443\u043b\u044c: \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0438\u043b\u0438 RequireJS \u043c\u043e\u0434\u0443\u043b\u044c<\/li>\n<li>UMD \u043c\u043e\u0434\u0443\u043b\u044c: \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0438\u043b\u0438 UmdJS \u043c\u043e\u0434\u0443\u043b\u044c<\/li>\n<li>ES \u043c\u043e\u0434\u0443\u043b\u044c: ECMAScript2015 \u0438\u043b\u0438 ES6 \u043c\u043e\u0434\u0443\u043b\u044c<\/li>\n<li>ES \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: ECMAScript2020 \u0438\u043b\u0438 ES11 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c<\/li>\n<li>\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: SystemJS \u043c\u043e\u0434\u0443\u043b\u044c<\/li>\n<li>Webpack \u043c\u043e\u0434\u0443\u043b\u044c: \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0438 \u0441\u0431\u043e\u0440\u043a\u0430 CJS, AMD \u0438 ES \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/li>\n<li>Babel \u043c\u043e\u0434\u0443\u043b\u044c: \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f ES \u043c\u043e\u0434\u0443\u043b\u044f<\/li>\n<li>TypeScript \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u043c\u0435\u043d<\/li>\n<\/ul>\n<p>  \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f JS \u0438\u043c\u0435\u0435\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 Node.js \u0438 \u0432\u0441\u0435\u043c\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u0414\u043b\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 ES, \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u0438\u0440\u0443\u044f \u0435\u0433\u043e \u0432 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Webpack\/Babel\/SystemJS\/TypeScript.<\/p>\n<p>  \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u043f\u043e\u0442\u0440\u0430\u0447\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043e\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u0442\u0440\u0430\u0447\u0435\u043d\u043e \u043d\u0435 \u0437\u0440\u044f.<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/501198\/\"> https:\/\/habr.com\/ru\/post\/501198\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/501198\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/o1\/-i\/qe\/o1-iqeyqme6vgoqcdvfycgxjodq.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0432\u0430\u0448\u0435\u043c\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044e \u043f\u0435\u0440\u0435\u0432\u043e\u0434 \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/weblogs.asp.net\/dixin\/understanding-all-javascript-module-formats-and-tools#webpack-module-bundle-from-cjs-amd-es-modules\" rel=\"nofollow\">\u00abUnderstanding (all) JavaScript module formats and tools\u00bb<\/a> \u0430\u0432\u0442\u043e\u0440\u0430 Dixin.<\/p>\n<p>  \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0447\u0430\u0441\u0442\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u0447\u0430\u0441\u0442\u0438, \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 (\u043c\u043e\u0434\u0443\u043b\u0438). \u041e\u0434\u043d\u0430\u043a\u043e JavaScript \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0438\u043c\u0435\u043b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u043b\u043e \u043a \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439. \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u044f, \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438 \u0432 JavaScript.<\/p>\n<ul>\n<li><a href=\"#1\">IIFE \u043c\u043e\u0434\u0443\u043b\u044c: \u0448\u0430\u0431\u043b\u043e\u043d JS \u043c\u043e\u0434\u0443\u043b\u044f<\/a><\/li>\n<li><a href=\"#2\">\u041e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: \u0448\u0430\u0431\u043b\u043e\u043d \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e JS \u043c\u043e\u0434\u0443\u043b\u044f<\/a><\/li>\n<li><a href=\"#3\">CJS \u043c\u043e\u0434\u0443\u043b\u044c: CommonJS \u043c\u043e\u0434\u0443\u043b\u044c \u0438\u043b\u0438 Node.js \u043c\u043e\u0434\u0443\u043b\u044c<\/a><\/li>\n<li><a href=\"#4\">AMD \u043c\u043e\u0434\u0443\u043b\u044c: \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0438\u043b\u0438 RequireJS \u043c\u043e\u0434\u0443\u043b\u044c<\/a><\/li>\n<li><a href=\"#5\">UMD \u043c\u043e\u0434\u0443\u043b\u044c: \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0438\u043b\u0438 UmdJS \u043c\u043e\u0434\u0443\u043b\u044c<\/a><\/li>\n<li><a href=\"#6\">ES \u043c\u043e\u0434\u0443\u043b\u044c: ECMAScript2015 \u0438\u043b\u0438 ES6 \u043c\u043e\u0434\u0443\u043b\u044c<\/a><\/li>\n<li><a href=\"#7\">ES \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: ECMAScript2020 \u0438\u043b\u0438 ES11 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c<\/a><\/li>\n<li><a href=\"#8\">\u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c: SystemJS \u043c\u043e\u0434\u0443\u043b\u044c<\/a><\/li>\n<li><a href=\"#9\">Webpack \u043c\u043e\u0434\u0443\u043b\u044c: \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f \u0438 \u0441\u0431\u043e\u0440\u043a\u0430 CJS, AMD \u0438 ES \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/a><\/li>\n<li><a href=\"#10\">Babel \u043c\u043e\u0434\u0443\u043b\u044c: \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f ES \u043c\u043e\u0434\u0443\u043b\u044f<\/a><\/li>\n<li><a href=\"#11\">TypeScript \u043c\u043e\u0434\u0443\u043b\u044c: \u0442\u0440\u0430\u043d\u0441\u043f\u0438\u043b\u044f\u0446\u0438\u044f CJS, AMD, ES \u0438 SystemJS \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/a><\/li>\n<\/ul>\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-303291","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/303291","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=303291"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/303291\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=303291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=303291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=303291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}