{"id":384666,"date":"2024-06-29T05:39:01","date_gmt":"2024-06-29T05:39:01","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=384666"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=384666","title":{"rendered":"<span>\u041a\u0430\u043a \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043e\u043d\u043b\u0430\u0439\u043d-\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 React \u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/08c\/414\/9ad\/08c4149ad9d6ce4af1eb7db36f08a766.jpg\" width=\"4910\" height=\"2580\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/08c\/414\/9ad\/08c4149ad9d6ce4af1eb7db36f08a766.jpg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0418\u043b\u044c\u044f, \u044f \u043b\u0438\u0434\u0435\u0440 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 \u0420\u0430\u0439\u0444\u0444\u0430\u0439\u0437\u0435\u043d\u0431\u0430\u043d\u043a\u0435. \u0421\u0440\u0435\u0434\u0438 \u043c\u043e\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u2014 \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0431\u044b\u043b \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c, \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c.\u00a0\u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430. \u0418\u0437\u0443\u0447\u0438\u0432 \u0440\u044b\u043d\u043e\u043a \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043c\u044b \u043f\u0440\u0438\u0448\u043b\u0438 \u043a \u0432\u044b\u0432\u043e\u0434\u0443, \u0447\u0442\u043e \u0438\u0437-\u0437\u0430 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0449\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043a\u043e\u0434\u0430 \u2014 \u043e\u043d\u043b\u0430\u0439\u043d-\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u043d\u0435\u0433\u043e, \u0447\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0438 \u0443\u043c\u0435\u043d\u0438\u0439. <\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u042d\u0442\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0440\u0430\u0437\u0431\u043e\u0440 \u0442\u0430\u043a\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p><strong>Monaco editor<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Esbuild + WebAssembly<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0438\u0441\u0430\u0442\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043d\u0430 <strong>React + TS<\/strong>.<\/p>\n<p>\u0427\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u0430 \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448\u0430 \u043e\u043d\u043b\u0430\u0439\u043d-\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<ul>\n<li>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e \u0431\u0435\u0437 \u0443\u0447\u0430\u0441\u0442\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u0431\u043b\u043e\u043a \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0438 \u043d\u0430 \u043f\u043b\u0435\u0439\u0433\u0440\u0430\u0443\u043d\u0434<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u0438\u043f\u044b \u0434\u043b\u044f <strong>react, react-dom, react-router-dom styled-components<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0418\u043c\u0435\u0442\u044c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u0447\u0430\u0441\u0442\u0438 \u043f\u043b\u0435\u0439\u0433\u0440\u0430\u0443\u043d\u0434\u0430<\/p>\n<\/li>\n<li>\n<p>\u0423\u043c\u0435\u0442\u044c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0438\u0437 <strong>TS <\/strong>\u0432 <strong>JS <\/strong>\u0438 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043b\u0435\u0439\u0433\u0440\u0430\u0443\u043d\u0434\u0435<\/p>\n<\/li>\n<\/ul>\n<p><u>\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 <\/u><a href=\"https:\/\/github.com\/Tetragius\/editor\"><u>Github<\/u><\/a><u> \u0438 \u0432 <\/u><a href=\"https:\/\/editor-tetragius.vercel.app\/\"><u>\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438<\/u><\/a><u>.<\/u><\/p>\n<h2>Monaco editor<\/h2>\n<p><a href=\"https:\/\/microsoft.github.io\/monaco-editor\/\">Monaco editor<\/a> \u2014 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 \u0441 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430, \u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u043d\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e\u0439, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439. Monaco \u0441\u043e\u0437\u0434\u0430\u043d\u00a0 Microsoft \u2014 \u043e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u0440\u0435\u0437\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430, \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0432 <strong>VS Code<\/strong>.<\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0447\u0435\u0440\u0442\u0430 Monaco \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 TypeScript-\u0430\u043d\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0441\u043e\u0431\u043e\u0439 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430, \u043d\u043e \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 <strong>IntelliSense <\/strong>\u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0442\u0438\u043f\u043e\u0432 (<strong>*.d.ts<\/strong>).<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430:<\/p>\n<pre><code class=\"javascript\">monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({   noSemanticValidation: true, noSyntaxValidation: false });  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({   jsx: monaco.languages.typescript.JsxEmit.React,   allowNonTsExtensions: true,   moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,   module: monaco.languages.typescript.ModuleKind.CommonJS,   noEmit: true,   esModuleInterop: true, }); <\/code><\/pre>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438 \u2014 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0438\u0437 <strong>tsconfig.json<\/strong>. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u043b\u044f <strong>typeRoots <\/strong>\u0438\u043b\u0438 <strong>outDir<\/strong>, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b,\u00a0\u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043d\u0435 \u043e\u043a\u0430\u0436\u0443\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0435\u0442. \u042d\u0442\u043e \u0443\u043f\u0443\u0449\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c, \u0438 \u043a\u0440\u0430\u0442\u043a\u043e \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043a\u043e\u043d\u0446\u0435.<\/p>\n<p>\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430:<\/p>\n<pre><code class=\"javascript\">loaStaticdDTS = async (libName: string) => {   const response = await fetch(`\/${libName}.d.ts`)   const dts = await response.text();   monaco.editor.createModel(dts, 'typescript', monaco.Uri.parse(`file:\/\/\/node_modules\/@types\/${libName}\/index.d.ts`)); monaco.languages.typescript.typescriptDefaults.addExtraLib(dts, `file:\/\/\/node_modules\/@types\/${libName}\/index.d.ts`); } <\/code><\/pre>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e <strong>5-\u044e <\/strong>\u0441\u0442\u0440\u043e\u043a\u0443 \u043a\u043e\u0434\u0430, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438 \u0438\u043c\u043f\u043e\u0440\u0442. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0442\u0430\u043a\u0436\u0435 \u00a0 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 <strong>d.ts<\/strong>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0434\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438 <strong>4-\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443<\/strong>. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0443\u0442\u0438 \u0434\u043e \u0444\u0430\u0439\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c\u00a0 <strong>`file:\/\/\/node_modules\/@types\/${libName}\/index.d.ts`<\/strong> \u2014 \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u00a0 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0434\u0432\u0438\u0436\u043e\u043a \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u00a0\u0431\u0435\u0437\u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f\u00a0\u043d\u0430\u0439\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7e8\/4d5\/d57\/7e84d5d57622d74cd462fed6c296ea4b.png\" width=\"1207\" height=\"456\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7e8\/4d5\/d57\/7e84d5d57622d74cd462fed6c296ea4b.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043b\u044e\u0447 <strong>typeRoots <\/strong>\u0432 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043d\u0435 \u043e\u043a\u0430\u0436\u0435\u0442 \u2014 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0430 \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0442\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0443\u0431\u0440\u0430\u043d.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430:<\/p>\n<pre><code class=\"javascript\">monaco.editor.createModel(`console.log('Hello world')`, 'typescript', monaco.Uri.parse(`file:\/\/\/index.tsx`)); <\/code><\/pre>\n<p>\u041b\u043e\u0433\u0438\u043a\u0430 \u0442\u0430\u043a\u0430\u044f \u0436\u0435, \u043a\u0430\u043a \u0438 \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u2014 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0443\u0442\u0438, \u0442\u043e\u0433\u0434\u0430 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u2014 \u0441 \u0442\u0438\u043f\u043e\u043c \u044f\u0437\u044b\u043a\u0430 <strong>typescript.<\/strong><\/p>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0438\u043f \u044f\u0437\u044b\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">monaco.editor.setModelLanguage(model, 'typescript'); <\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 <strong>model <\/strong>\u2014\u00a0\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <strong>createModel<\/strong>. \u041f\u043e \u0441\u0443\u0442\u0438, \u043c\u043e\u0434\u0435\u043b\u044c \u0441\u0445\u043e\u0436\u0430 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u043e\u0439 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 <strong>VS Code<\/strong>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0443\u0442\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e,\u00a0\u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b8a\/fa7\/581\/b8afa75817b329a0745bad4c8b43bfd7.png\" width=\"330\" height=\"301\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b8a\/fa7\/581\/b8afa75817b329a0745bad4c8b43bfd7.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430:<\/p>\n<pre><code class=\"javascript\">const editor = monaco.editor.create(ref, { theme: \"vs-dark\",   automaticLayout: true,   model: this.model }); <\/code><\/pre>\n<p>\u0412 \u043a\u043e\u0434\u0435:<\/p>\n<ul>\n<li>\n<p><strong>ref <\/strong>\u2014 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 <strong>DOM-<\/strong>\u0443\u0437\u0435\u043b, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0435\u0440\u0435\u0437 <strong>useRef<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>theme <\/strong>\u2014 \u0446\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0441\u0445\u0435\u043c\u0430<\/p>\n<\/li>\n<li>\n<p><strong>automaticLayout <\/strong>\u2014 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f<\/p>\n<\/li>\n<li>\n<p><strong>model <\/strong>\u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0430\u044f \u0440\u0430\u043d\u0435\u0435 \u043c\u043e\u0434\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0449\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u0438\u043d\u0438\u043a\u0430\u0440\u0442\u044b, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043c\u0443\u043b\u044c\u0442\u0438\u043a\u0443\u0440\u0441\u043e\u0440\u043d\u043e\u0441\u0442\u0438 \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430.<\/p>\n<p>\u0427\u0438\u0442\u0430\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0443 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">editor.onDidChangeModelContent(() => ESService.build(editor.getModel().getValue()));<\/code><\/pre>\n<h2>Esbuild<\/h2>\n<p>Esbuild \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438\u0437 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u0432. \u041d\u0430\u0441 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442, \u0447\u0442\u043e \u043e\u043d \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 <strong>WebAssembly<\/strong> \u2014 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0443 Esbuild \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c, \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u044d\u0442\u0438\u043c \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u043c \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0430\u043a\u0435\u0442 <strong>esbuild-wasm<\/strong> \u0438, \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e, <strong>esbuild, <\/strong>\u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043c\u043e\u0447\u044c \u0441\u0435\u0431\u0435 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u043e\u0439 \u0442\u0438\u043f\u043e\u0432.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0441\u0431\u043e\u0440\u0449\u0438\u043a:<\/p>\n<pre><code class=\"javascript\">esbuild.initialize({ wasmURL: 'esbuild.wasm' }).then(() => {     ESService.build = async (text: string) => {         const data = await esbuild.build(esBuildConfig(text));         data.outputFiles?.forEach((file: any) => {             const _file = new File([file.text], `index.js`, { type: 'text\/javascript' });             const url = URL.createObjectURL(_file);             localStorage.setItem('script', url);         });     } }); <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u043c \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 <strong>build <\/strong>\u0438 <strong>transform<\/strong>.<\/p>\n<ul>\n<li>\n<p><strong>outputFiles <\/strong>\u2014 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0431\u0430\u043d\u0434\u043b. \u041c\u044b \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0438\u0437 \u043d\u0435\u0433\u043e <strong>url <\/strong>\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 <strong>localeStorage.<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>build <\/strong>\u2014 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">export const esBuildConfig = (text: string): BuildOptions => ({     entryPoints: ['&lt;stdin>'],     bundle: true,     loader: { '.tsx': 'tsx' },     external: ['react', 'react-dom', 'react-router-dom', 'styled-components'],     plugins: [pluginEntry(this, text), pluginGlobalExternal()],     write: false });<\/code><\/pre>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u2014 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0434\u043b\u044f <strong>esbuild<\/strong>. \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043b\u043e\u0430\u0434\u0435\u0440\u044b, \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b. \u041e\u0441\u043e\u0431\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u043b\u044e\u0447 <strong>write <\/strong>\u2014 \u0437\u0430\u0434\u0430\u0432 \u0435\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <strong>false, <\/strong>\u043c\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u043c \u0437\u0430\u043f\u0438\u0441\u044c \u0444\u0430\u0439\u043b\u0430 \u0432 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0444\u0430\u0439\u043b\u043e\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0438 \u043f\u043e\u0439\u043c\u0430\u0435\u043c \u0435\u0433\u043e \u0432 <strong>data.outputFiles<\/strong>. \u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430\u00a0 <strong>entryPoints <\/strong>\u2014 \u0442\u0443\u0442 \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043e\u0442\u043a\u0443\u0434\u0430 \u0431\u0440\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u2014 \u044d\u0442\u043e\u00a0 \u0432\u0430\u0436\u043d\u043e \u0434\u043b\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430. \u041e\u0431\u044b\u0447\u043d\u043e \u0442\u0443\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443, \u043d\u043e \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<h2>\u041e\u043f\u0438\u0448\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u044b<\/h2>\n<p>\u041e\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u0445 \u043a Esbuild \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e\u00a0<a href=\"https:\/\/esbuild.github.io\/plugins\/#load-options\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0440\u0430\u0442\u043a\u043e \u2014\u00a0\u043f\u043b\u0430\u0433\u0438\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043c\u044f (<strong>name<\/strong>) \u0438 \u043d\u0430\u0431\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 <strong>onResolve <\/strong>\u0438 <strong>onLoad<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442, \u043a\u0430\u043a \u0438 \u0447\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0430\u043d\u0434\u043b\u0430.<\/p>\n<p><strong>pluginEntry<\/strong><\/p>\n<pre><code class=\"javascript\">const namespace = 'virtual';  export const pluginEntry = (context: any, text: string): Plugin => {     return {         name: 'virtual-entry',         setup(build) {             build.onResolve({ filter: \/^&lt;stdin>$\/ }, () => {                 return {                     path: 'index.tsx',                     namespace: namespace,                     pluginData: {                         importer: '',                     },                 };             });              build.onLoad({ filter: \/.*\/, namespace: namespace }, async (args) => {                 return {                     contents: text,                     pluginData: {                         importer: 'index.tsx',                     },                     loader: 'tsx',                 };             });         },     }; }; <\/code><\/pre>\n<p>\u042d\u0442\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 <strong>&lt;stdin><\/strong> (\u0440\u0430\u043d\u0435\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435), \u043c\u044b \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c \u0435\u0435 \u0442\u0435\u0433\u043e\u043c virtual, \u041d\u0430 \u043d\u0435\u0433\u043e\u00a0\u043d\u0430\u0446\u0435\u043b\u0435\u043d \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 <strong>onLoad<\/strong> \u2014 \u043e\u043d, \u0432\u0438\u0434\u044f \u044d\u0442\u043e\u0442 \u0442\u0435\u0433, \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u043c\u0443 \u0442\u0435\u043a\u0441\u0442 \u0438\u0437 model-\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043b\u043e\u0430\u0434\u0435\u0440 \u0434\u043b\u044f <strong>tsx.<\/strong><\/p>\n<p><strong>pluginGlobalExternal<\/strong><\/p>\n<pre><code class=\"javascript\">export const pluginGlobalExternal = (): Plugin => {     return {         name: 'plugin-modules',         setup(build) {              build.onResolve({ filter: \/^([^\\.\\\/]).*\/ }, (args) => {                  const external = build.initialOptions.external?.includes(args.path);                  if (external) {                     return {                         path: args.path,                         namespace: `node_modules:external`,                         pluginData: {                             ...args.pluginData,                             package: args.path,                         },                     };                 }              });              build.onLoad({ filter: \/.*\/, namespace: `node_modules:external` }, async (args) => {                  const content = `module.exports = window['${args.path}'];`;                  return {                     contents: content,                     pluginData: {                         importer: args.path,                     },                     loader: 'js',                 };             });          },     }; }; <\/code><\/pre>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u043b\u044e\u0431\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 <strong>import &#8230; from \u2026,<\/strong> \u043f\u043e\u043c\u0435\u0447\u0430\u044f \u0438\u0445 \u043a\u0430\u043a \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 onLoad. \u041e\u043d,\u00a0\u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432\u0438\u0434\u0430 <strong>module.exports = window[&#8216;${args.path}&#8217;].<\/strong><\/p>\n<p>\u041f\u043e\u043b\u0435 <strong>pluginData<\/strong> \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u0434\u0435 \u043f\u0435\u0440\u0435\u0442\u0435\u043a\u0430\u0435\u0442 \u043f\u043e \u0446\u0435\u043f\u043e\u0447\u043a\u0435 \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432\u0430\u0436\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044f <strong>importer <\/strong>\u0438 <strong>path, <\/strong>\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0444\u043b\u0430\u0433 <strong>sourcemap <\/strong>(\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c <strong>inline<\/strong>).<\/p>\n<pre><code class=\"javascript\"> \/\/ node_modules:external:react   var require_react = __commonJS({     \"node_modules:external:react\"(exports, module) {       module.exports = window[\"react\"];     }   });    \/\/ node_modules:external:react-dom   var require_react_dom = __commonJS({     \"node_modules:external:react-dom\"(exports, module) {       module.exports = window[\"react-dom\"];     }   });    \/\/ node_modules:external:styled-components   var require_styled_components = __commonJS({     \"node_modules:external:styled-components\"(exports, module) {       module.exports = window[\"styled-components\"];     }   });    \/\/ node_modules:external:react-router-dom   var require_react_router_dom = __commonJS({     \"node_modules:external:react-router-dom\"(exports, module) {       module.exports = window[\"react-router-dom\"];     }   }); <\/code><\/pre>\n<h2>Playground<\/h2>\n<p>\u0412 \u0447\u0430\u0441\u0442\u0438 \u043f\u043b\u0435\u0439\u0433\u0440\u0430\u0443\u043d\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d <strong>html-<\/strong>\u0444\u0430\u0439\u043b:<\/p>\n<pre><code class=\"xml\">&lt;!DOCTYPE html> &lt;html lang=\"en\">  &lt;head>     &lt;meta charset=\"UTF-8\">     &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">     &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">     &lt;title>Playground&lt;\/title>     &lt;script crossorigin src=\"https:\/\/unpkg.com\/react@17\/umd\/react.development.js\">&lt;\/script>     &lt;script crossorigin src=\"https:\/\/unpkg.com\/react-dom@17\/umd\/react-dom.development.js\">&lt;\/script>     &lt;script crossorigin src=\"\/\/unpkg.com\/react-is\/umd\/react-is.production.min.js\">&lt;\/script>     &lt;script crossorigin src=\"\/\/unpkg.com\/styled-components\/dist\/styled-components.min.js\">&lt;\/script>     &lt;script crossorigin         src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/react-router-dom\/5.2.0\/react-router-dom.min.js\">&lt;\/script> &lt;\/head> &lt;body>     &lt;div id=\"app\">&lt;\/div> &lt;\/body> &lt;script>     window['react'] = window.React;     window['react-dom'] = window.ReactDOM;     window['react-router-dom'] = window.ReactRouterDOM;     window['styled-components'] = window.styled;    const listener = (e) => {     if (e.key === 'script') {     fetch(e.newValue)       .then(response => response.text())         .then(eval)         .catch(console.log);     } } listener({key: 'script', newValue: localStorage.getItem('script')});  const updateNavigationText = () => window.top.postMessage(JSON.stringify(location)); updateNavigationText();  const pushState = history.pushState; history.pushState = (...args) => {     pushState.apply(history, args);     updateNavigationText(); };  window.addEventListener('storage', listener); window.addEventListener('popstate', updateNavigationText);  &lt;\/script> &lt;\/html> <\/code><\/pre>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043e\u043d \u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0430\u043d\u0434\u043b \u0438\u0449\u0435\u0442 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 <strong>window<\/strong>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043b\u0435\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 storage \u0437\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0431\u0430\u043d\u0434\u043b\u0430.<\/p>\n<ul>\n<li>\n<p><strong>popstate <\/strong>\u043b\u043e\u0432\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 <strong>\u0445\u0435\u0448\u0430<\/strong><\/p>\n<\/li>\n<li>\n<p>\u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 <strong>history.pushState<\/strong> \u2014 \u043b\u043e\u0432\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f <strong>url <\/strong>\u0431\u0435\u0437 <strong>\u0445\u0435\u0448\u0430<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u0432\u0438\u0434:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/251\/522\/409\/25152240921e11674a29c54b7c00b803.png\" width=\"1223\" height=\"634\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/251\/522\/409\/25152240921e11674a29c54b7c00b803.png\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 \u044d\u0442\u043e\u043c\u00a0\u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u044b. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0444\u0430\u0439\u043b\u043e\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <strong>memfs <\/strong>(\u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/builder-demo.vercel.app\/\"><u>\u0437\u0434\u0435\u0441\u044c<\/u><\/a>), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0440\u0435\u0434, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043b\u0435\u0439\u0433\u0440\u0430\u0443\u043d\u0434 \u043d\u0430 <strong>blazor <\/strong>\u0438\u043b\u0438 <strong>pyodide.<\/strong><\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c (<strong>monaco-collab-ext<\/strong>), \u043d\u043e \u0442\u0443\u0442 \u043d\u0430\u043c \u0443\u0436\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0435\u0440. \u0422\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0439 \u043d\u043e\u0432\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439.<\/p>\n<h2>\u0411\u043e\u043d\u0443\u0441<\/h2>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043a\u0430\u043a \u0438 \u043e\u0431\u0435\u0449\u0430\u043b, \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u0444\u0430\u0439\u043b\u043e\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u043c <strong>memfs <\/strong>(\u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043e\u0442 <strong>memory file system<\/strong>). \u042d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u2014 \u043f\u043e\u043b\u043d\u0430\u044f \u043a\u043e\u043f\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <strong>fs<\/strong> \u0438\u0437 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 \u0434\u043b\u044f <strong>node.js.<\/strong><\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c \u0444\u0430\u0439\u043b <strong>webpack.config.js, <\/strong>\u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432 <strong>resolve <\/strong>\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0431\u043b\u043e\u043a:<\/p>\n<pre><code class=\"javascript\">fallback: {        fs: require.resolve(\"memfs\"),       stream: require.resolve(\"stream-browserify\"),        buffer: require.resolve(\"buffer\"),        path: require.resolve(\"path-browserify\"),        assert: require.resolve(\"assert-browserify\"),        process: false, } <\/code><\/pre>\n<p>\u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u043a \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c-\u0437\u0430\u043c\u0435\u0441\u0442\u0438\u0442\u0435\u043b\u044f\u043c. \u0422\u0430\u043a\u0436\u0435 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">var process = module.exports = {}; var cachedSetTimeout; var cachedClearTimeout;   function defaultSetTimeout() {     throw new Error('setTimeout has not been defined'); }   function defaultClearTimeout() {     throw new Error('clearTimeout has not been defined'); }   (function () {     try {         if (typeof setTimeout === 'function') {             cachedSetTimeout = setTimeout;         } else {             cachedSetTimeout = defaultSetTimeout;         }     } catch (e) {         cachedSetTimeout = defaultSetTimeout;     }     try {         if (typeof clearTimeout === 'function') {             cachedClearTimeout = clearTimeout;         } else {             cachedClearTimeout = defaultClearTimeout;         }     } catch (e) {         cachedClearTimeout = defaultClearTimeout;     } }())   function runTimeout(fun) {     if (cachedSetTimeout === setTimeout) {         return setTimeout(fun, 0);     }       if ((cachedSetTimeout === defaultSetTimeout || !cachedSetTimeout) &amp;&amp; setTimeout) {         cachedSetTimeout = setTimeout;         return setTimeout(fun, 0);     }     try {         return cachedSetTimeout(fun, 0);     } catch (e) {         try {             return cachedSetTimeout.call(null, fun, 0);         } catch (e) {             return cachedSetTimeout.call(this, fun, 0);         }     } }   function runClearTimeout(marker) {     if (cachedClearTimeout === clearTimeout) {         return clearTimeout(marker);     }     if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) &amp;&amp; clearTimeout) {         cachedClearTimeout = clearTimeout;         return clearTimeout(marker);     }     try {         return cachedClearTimeout(marker);     } catch (e) {         try {             return cachedClearTimeout.call(null, marker);         } catch (e) {             return cachedClearTimeout.call(this, marker);         }     } }   var queue = []; var draining = false; var currentQueue; var queueIndex = -1;   function cleanUpNextTick() {     if (!draining || !currentQueue) {         return;     }     draining = false;     if (currentQueue.length) {         queue = currentQueue.concat(queue);     } else {         queueIndex = -1;     }     if (queue.length) {         drainQueue();     } }   function drainQueue() {     if (draining) {         return;     }     var timeout = runTimeout(cleanUpNextTick);     draining = true;       var len = queue.length;     while (len) {         currentQueue = queue;         queue = [];         while (++queueIndex &lt; len) {             if (currentQueue) {                 currentQueue[queueIndex].run();             }         }         queueIndex = -1;         len = queue.length;     }     currentQueue = null;     draining = false;     runClearTimeout(timeout); }   process.nextTick = function (fun) {     var args = new Array(arguments.length - 1);     if (arguments.length > 1) {         for (var i = 1; i &lt; arguments.length; i++) {             args[i - 1] = arguments[i];         }     }     queue.push(new Item(fun, args));     if (queue.length === 1 &amp;&amp; !draining) {         runTimeout(drainQueue);     } };   function Item(fun, array) {     this.fun = fun;     this.array = array; }   Item.prototype.run = function () {     this.fun.apply(null, this.array); };   process.title = 'browser'; process.browser = true; process.env = {}; process.argv = []; process.version = ''; process.versions = {};   function noop() { }   process.on = noop; process.addListener = noop; process.once = noop; process.off = noop; process.removeListener = noop; process.removeAllListeners = noop; process.emit = noop; process.prependListener = noop; process.prependOnceListener = noop;   process.listeners = function (name) { return [] }   process.binding = function (name) {     throw new Error('process.binding is not supported'); };   process.cwd = function () { return '\/' };   process.chdir = function (dir) {     throw new Error('process.chdir is not supported'); };   process.umask = function () { return 0; };   window.process = process; window.global = window;<\/code><\/pre>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0443\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u043d\u043e\u0433\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f <strong>node.js<\/strong> \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0435\u0442.<\/p>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u0440\u0430\u0437 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u0438\u0441\u043a\u0430:<\/p>\n<pre><code class=\"javascript\">import { Volume, IFs } from 'memfs'; this.vol = Volume.fromJSON({});<\/code><\/pre>\n<p>\u0418 \u043d\u0430\u043f\u0438\u0448\u0435\u043c memfs-\u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f <strong>esbuild:<\/strong><\/p>\n<pre><code class=\"javascript\">const getLibMainFile = (libName: string) => {     const filePath = `${store.project.name}\/node_modules\/${libName}`;     const isJS = FS.existsSync(`${filePath}.js`);     const main = !isJS &amp;&amp; (JSON.parse(FS.readFileSync(`${filePath}\/package.json`, 'utf-8')).main ?? 'index.js');     return isJS ? `${filePath}.js` : path.resolve(filePath, main); }   const resolve = ({ id, importer }: { id: string; importer: string; }) => {     let resolvedPath = id;       if (importer &amp;&amp; id.startsWith('.')) {         resolvedPath = path.resolve(path.dirname(importer), id);     }         for (const x of ['.ts', '.js', '.tsx', '.jsx']) {         const realPath = resolvedPath + '\/index' + x;         if (fs.existsSync(realPath)) {             return realPath;         }       }       for (const x of ['', '.ts', '.js', '.css', '.tsx', '.jsx']) {         const realPath = resolvedPath + x;         if (fs.existsSync(realPath)) {             return realPath;         }       }         throw new Error(`${resolvedPath} not exists`); }   export const pluginMemfs = (context: any): Plugin => {     return {         name: 'memfs-plugin',         setup(build) {               build.onResolve({ filter: \/^\\.{1,2}\\\/.*\/, namespace: namespace }, (args) => {                 return {                     path: args.path,                     pluginData: args.pluginData,                     namespace: namespace,                 };             });               build.onLoad({ filter: \/.*\/, namespace: namespace }, async (args) => {                 let realPath = args.path;                 const resolvePath = resolve({                     id: args.path,                     importer: args.pluginData.importer                 });                 if (!resolvePath) {                     throw new Error('not found');                 }                 realPath = resolvePath;                 const content = (await FS.readFileAsync(realPath)).toString();                 return {                     contents: content,                     pluginData: {                         importer: realPath,                     },                     loader: path.extname(realPath).slice(1) as 'js',                 };             });           },     }; } <\/code><\/pre>\n<p>\u041c\u0435\u0442\u043e\u0434 <strong>onResolve<\/strong> \u0438\u0437 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 <strong>node_modules<\/strong>:<\/p>\n<pre><code class=\"javascript\">build.onResolve({ filter: \/^([^\\.\\\/]).*\/ }, (args) => {                   return {                     path: getLibMainFile(args.path),                     namespace: `node_modules`,                     pluginData: {                         ...args.pluginData,                         package: args.path,                     },                 };               }); <\/code><\/pre>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043c\u0435\u0442\u043e\u0434\u044b: <strong>getLibMainFile <\/strong>\u0438 <strong>resolve. <\/strong>\u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0444\u0430\u0439\u043b\u043e\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443, <strong>esbuild <\/strong>\u043d\u0435 \u0437\u043d\u0430\u0435\u0442 \u043e\u0431 \u044d\u0442\u043e\u043c \u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0443\u0442\u0438. \u042d\u0442\u0438\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u043c\u044b \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<ul>\n<li>\n<p><strong>import \u2026 from \u2018libname\u2019<\/strong> \u2014 \u0438\u0449\u0435\u043c package.json \u0438 \u043f\u043e\u043b\u0435 main<\/p>\n<\/li>\n<li>\n<p><strong>import \u2026 from \u2018libname\/folder\u2019<\/strong> \u2014 \u0438\u0449\u0435\u043c \u043f\u0430\u043f\u043a\u0443 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u0430 \u0432 \u043d\u0435\u0439 package.json \u0438\u043b\u0438 index.js<\/p>\n<\/li>\n<li>\n<p><strong>import \u2026 from \u2018libname\/file\u2019<\/strong> \u2014 \u0438\u0449\u0435\u043c \u0444\u0430\u0439\u043b \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0438\u0437 \u043f\u0430\u043f\u043e\u043a, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043a\u0430\u043a \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c, \u0442\u0430\u043a \u0438 \u043d\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u0435, \u0438 \u0438\u043c\u0435\u0442\u044c \u0438\u043b\u0438 \u043d\u0435 \u0438\u043c\u0435\u0442\u044c \u0444\u0430\u0439\u043b\u044b index.ts \u0438\u043b\u0438 index.js.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0435. \u041d\u0438\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0432\u0441\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b.\u00a0<\/p>\n<p><strong>\u0421\u0441\u044b\u043b\u043a\u0438<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/microsoft.github.io\/monaco-editor\/\">monaco-editor<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/convergencelabs\/monaco-collab-ext\">monaco-collab-ext<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/esbuild.github.io\/\">esbuild<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/memfs\">memfs<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/dotnet.microsoft.com\/apps\/aspnet\/web-apps\/blazor\">blazor<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/pyodide\/pyodide\">pyodide<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/Tetragius\/editor\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/editor-tetragius.vercel.app\/\">\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f<\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/568102\/\"> https:\/\/habr.com\/ru\/articles\/568102\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0418\u043b\u044c\u044f, \u044f \u043b\u0438\u0434\u0435\u0440 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432 \u0420\u0430\u0439\u0444\u0444\u0430\u0439\u0437\u0435\u043d\u0431\u0430\u043d\u043a\u0435. \u0421\u0440\u0435\u0434\u0438 \u043c\u043e\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u2014 \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0431\u044b\u043b \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c, \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c.\u00a0\u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430. \u0418\u0437\u0443\u0447\u0438\u0432 \u0440\u044b\u043d\u043e\u043a \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043c\u044b \u043f\u0440\u0438\u0448\u043b\u0438 \u043a \u0432\u044b\u0432\u043e\u0434\u0443, \u0447\u0442\u043e \u0438\u0437-\u0437\u0430 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0449\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043a\u043e\u0434\u0430 \u2014 \u043e\u043d\u043b\u0430\u0439\u043d-\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0443. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u043d\u0435\u0433\u043e, \u0447\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u0438 \u0443\u043c\u0435\u043d\u0438\u0439. <\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>\u042d\u0442\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0440\u0430\u0437\u0431\u043e\u0440 \u0442\u0430\u043a\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\n<p><strong>Monaco editor<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Esbuild + WebAssembly<\/strong><\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0438\u0441\u0430\u0442\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043d\u0430 <strong>React + TS<\/strong>.<\/p>\n<p>\u0427\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u0430 \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0448\u0430 \u043e\u043d\u043b\u0430\u0439\u043d-\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430:<\/p>\n<ul>\n<li>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043d\u043e\u043c\u043d\u043e \u0431\u0435\u0437 \u0443\u0447\u0430\u0441\u0442\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u043d\u0430 \u0431\u043b\u043e\u043a \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0438 \u043d\u0430 \u043f\u043b\u0435\u0439\u0433\u0440\u0430\u0443\u043d\u0434<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u0438\u043f\u044b \u0434\u043b\u044f <strong>react, react-dom, react-router-dom styled-components<\/strong><\/p>\n<\/li>\n<li>\n<p>\u0418\u043c\u0435\u0442\u044c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0430\u0434\u0440\u0435\u0441\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u0447\u0430\u0441\u0442\u0438 \u043f\u043b\u0435\u0439\u0433\u0440\u0430\u0443\u043d\u0434\u0430<\/p>\n<\/li>\n<li>\n<p>\u0423\u043c\u0435\u0442\u044c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0438\u0437 <strong>TS <\/strong>\u0432 <strong>JS <\/strong>\u0438 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043b\u0435\u0439\u0433\u0440\u0430\u0443\u043d\u0434\u0435<\/p>\n<\/li>\n<\/ul>\n<p><u>\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 <\/u><a href=\"https:\/\/github.com\/Tetragius\/editor\"><u>Github<\/u><\/a><u> \u0438 \u0432 <\/u><a href=\"https:\/\/editor-tetragius.vercel.app\/\"><u>\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438<\/u><\/a><u>.<\/u><\/p>\n<h2>Monaco editor<\/h2>\n<p><a href=\"https:\/\/microsoft.github.io\/monaco-editor\/\">Monaco editor<\/a> \u2014 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043a\u043e\u0434\u0430 \u0441 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430, \u0438 \u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u043d\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e\u0439, \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439. Monaco \u0441\u043e\u0437\u0434\u0430\u043d\u00a0 Microsoft \u2014 \u043e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u0440\u0435\u0437\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430, \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0432 <strong>VS Code<\/strong>.<\/p>\n<p>\u041e\u0442\u043b\u0438\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0447\u0435\u0440\u0442\u0430 Monaco \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 TypeScript-\u0430\u043d\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0441\u043e\u0431\u043e\u0439 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430, \u043d\u043e \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 <strong>IntelliSense <\/strong>\u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0442\u0438\u043f\u043e\u0432 (<strong>*.d.ts<\/strong>).<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430:<\/p>\n<pre><code class=\"javascript\">monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({   noSemanticValidation: true, noSyntaxValidation: false });  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({   jsx: monaco.languages.typescript.JsxEmit.React,   allowNonTsExtensions: true,   moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,   module: monaco.languages.typescript.ModuleKind.CommonJS,   noEmit: true,   esModuleInterop: true, }); <\/code><\/pre>\n<p>\u041f\u043e \u0441\u0443\u0442\u0438 \u2014 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u0438\u0437 <strong>tsconfig.json<\/strong>. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e\u043b\u044f <strong>typeRoots <\/strong>\u0438\u043b\u0438 <strong>outDir<\/strong>, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b,\u00a0\u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043d\u0435 \u043e\u043a\u0430\u0436\u0443\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0435\u0442. \u042d\u0442\u043e \u0443\u043f\u0443\u0449\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c, \u0438 \u043a\u0440\u0430\u0442\u043a\u043e \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043a\u043e\u043d\u0446\u0435.<\/p>\n<p>\u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430:<\/p>\n<pre><code class=\"javascript\">loaStaticdDTS = async (libName: string) => {   const response = await fetch(`\/${libName}.d.ts`)   const dts = await response.text();   monaco.editor.createModel(dts, 'typescript', monaco.Uri.parse(`file:\/\/\/node_modules\/@types\/${libName}\/index.d.ts`)); monaco.languages.typescript.typescriptDefaults.addExtraLib(dts, `file:\/\/\/node_modules\/@types\/${libName}\/index.d.ts`); } <\/code><\/pre>\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e <strong>5-\u044e <\/strong>\u0441\u0442\u0440\u043e\u043a\u0443 \u043a\u043e\u0434\u0430, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438 \u0438\u043c\u043f\u043e\u0440\u0442. \u041e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0442\u0430\u043a\u0436\u0435 \u00a0 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 <strong>d.ts<\/strong>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0434\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438 <strong>4-\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443<\/strong>. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0443\u0442\u0438 \u0434\u043e \u0444\u0430\u0439\u043b\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c\u00a0 <strong>`file:\/\/\/node_modules\/@types\/${libName}\/index.d.ts`<\/strong> \u2014 \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c\u00a0 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0434\u0432\u0438\u0436\u043e\u043a \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u00a0\u0431\u0435\u0437\u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f\u00a0\u043d\u0430\u0439\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u043c\u0443 \u043f\u0443\u0442\u0438.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041a\u043b\u044e\u0447 <strong>typeRoots <\/strong>\u0432 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043d\u0435 \u043e\u043a\u0430\u0436\u0435\u0442 \u2014 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0430 \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0442\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0443\u0431\u0440\u0430\u043d.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430:<\/p>\n<pre><code class=\"javascript\">monaco.editor.createModel(`console.log('Hello world')`, 'typescript', monaco.Uri.parse(`file:\/\/\/index.tsx`)); <\/code><\/pre>\n<p>\u041b\u043e\u0433\u0438\u043a\u0430 \u0442\u0430\u043a\u0430\u044f \u0436\u0435, \u043a\u0430\u043a \u0438 \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u2014 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0443\u0442\u0438, \u0442\u043e\u0433\u0434\u0430 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u2014 \u0441 \u0442\u0438\u043f\u043e\u043c \u044f\u0437\u044b\u043a\u0430 <strong>typescript.<\/strong><\/p>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0438\u043f \u044f\u0437\u044b\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">monaco.editor.setModelLanguage(model, 'typescript'); <\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u0434\u0435 <strong>model <\/strong>\u2014\u00a0\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <strong>createModel<\/strong>. \u041f\u043e \u0441\u0443\u0442\u0438, \u043c\u043e\u0434\u0435\u043b\u044c \u0441\u0445\u043e\u0436\u0430 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u043e\u0439 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 <strong>VS Code<\/strong>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u043f\u0443\u0442\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e,\u00a0\u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c:<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430:<\/p>\n<pre><code class=\"javascript\">const editor = monaco.editor.create(ref, { theme: \"vs-dark\",   automaticLayout: true,   model: this.model }); <\/code><\/pre>\n<p>\u0412 \u043a\u043e\u0434\u0435:<\/p>\n<ul>\n<li>\n<p><strong>ref <\/strong>\u2014 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 <strong>DOM-<\/strong>\u0443\u0437\u0435\u043b, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0435\u0440\u0435\u0437 <strong>useRef<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>theme <\/strong>\u2014 \u0446\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0441\u0445\u0435\u043c\u0430<\/p>\n<\/li>\n<li>\n<p><strong>automaticLayout <\/strong>\u2014 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f<\/p>\n<\/li>\n<li>\n<p><strong>model <\/strong>\u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0430\u044f \u0440\u0430\u043d\u0435\u0435 \u043c\u043e\u0434\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0449\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u0438\u043d\u0438\u043a\u0430\u0440\u0442\u044b, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043c\u0443\u043b\u044c\u0442\u0438\u043a\u0443\u0440\u0441\u043e\u0440\u043d\u043e\u0441\u0442\u0438 \u0438 \u043c\u043d\u043e\u0433\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430.<\/p>\n<p>\u0427\u0438\u0442\u0430\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0443 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">editor.onDidChangeModelContent(() => ESService.build(editor.getModel().getValue()));<\/code><\/pre>\n<h2>Esbuild<\/h2>\n<p>Esbuild \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438\u0437 \u0431\u044b\u0441\u0442\u0440\u044b\u0445 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u0432. \u041d\u0430\u0441 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442, \u0447\u0442\u043e \u043e\u043d \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 <strong>WebAssembly<\/strong> \u2014 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0443 Esbuild \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c, \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u044d\u0442\u0438\u043c \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u043c \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0430\u043a\u0435\u0442 <strong>esbuild-wasm<\/strong> \u0438, \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e, <strong>esbuild, <\/strong>\u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043c\u043e\u0447\u044c \u0441\u0435\u0431\u0435 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u043e\u0439 \u0442\u0438\u043f\u043e\u0432.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0441\u0431\u043e\u0440\u0449\u0438\u043a:<\/p>\n<pre><code class=\"javascript\">esbuild.initialize({ wasmURL: 'esbuild.wasm' }).then(() => {     ESService.build = async (text: string) => {         const data = await esbuild.build(esBuildConfig(text));         data.outputFiles?.forEach((file: any) => {             const _file = new File([file.text], `index.js`, { type: 'text\/javascript' });             const url = URL.createObjectURL(_file);             localStorage.setItem('script', url);         });     } }); <\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u043c \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 <strong>build <\/strong>\u0438 <strong>transform<\/strong>.<\/p>\n<ul>\n<li>\n<p><strong>outputFiles <\/strong>\u2014 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0431\u0430\u043d\u0434\u043b. \u041c\u044b \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0438\u0437 \u043d\u0435\u0433\u043e <strong>url <\/strong>\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 <strong>localeStorage.<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>build <\/strong>\u2014 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">export const esBuildConfig = (text: string): BuildOptions => ({     entryPoints: ['&lt;stdin>'],     bundle: true,     loader: { '.tsx': 'tsx' },     external: ['react', 'react-dom', 'react-router-dom', 'styled-components'],     plugins: [pluginEntry(this, text), pluginGlobalExternal()],     write: false });<\/code><\/pre>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u2014 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0434\u043b\u044f <strong>esbuild<\/strong>. \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043b\u043e\u0430\u0434\u0435\u0440\u044b, \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u044b. \u041e\u0441\u043e\u0431\u043e\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u043b\u044e\u0447 <strong>write <\/strong>\u2014 \u0437\u0430\u0434\u0430\u0432 \u0435\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <strong>false, <\/strong>\u043c\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u043c \u0437\u0430\u043f\u0438\u0441\u044c \u0444\u0430\u0439\u043b\u0430 \u0432 \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0444\u0430\u0439\u043b\u043e\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0438 \u043f\u043e\u0439\u043c\u0430\u0435\u043c \u0435\u0433\u043e \u0432 <strong>data.outputFiles<\/strong>. \u0422\u0430\u043a\u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430\u00a0 <strong>entryPoints <\/strong>\u2014 \u0442\u0443\u0442 \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043e\u0442\u043a\u0443\u0434\u0430 \u0431\u0440\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u2014 \u044d\u0442\u043e\u00a0 \u0432\u0430\u0436\u043d\u043e \u0434\u043b\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430. \u041e\u0431\u044b\u0447\u043d\u043e \u0442\u0443\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443, \u043d\u043e \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<h2>\u041e\u043f\u0438\u0448\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u044b<\/h2>\n<p>\u041e\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u0445 \u043a Esbuild \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e\u00a0<a href=\"https:\/\/esbuild.github.io\/plugins\/#load-options\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0440\u0430\u0442\u043a\u043e \u2014\u00a0\u043f\u043b\u0430\u0433\u0438\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0438\u043c\u044f (<strong>name<\/strong>) \u0438 \u043d\u0430\u0431\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 <strong>onResolve <\/strong>\u0438 <strong>onLoad<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442, \u043a\u0430\u043a \u0438 \u0447\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0430\u043d\u0434\u043b\u0430.<\/p>\n<p><strong>pluginEntry<\/strong><\/p>\n<pre><code class=\"javascript\">const namespace = 'virtual';  export const pluginEntry = (context: any, text: string): Plugin => {     return {         name: 'virtual-entry',         setup(build) {             build.onResolve({ filter: \/^&lt;stdin>$\/ }, () => {                 return {                     path: 'index.tsx',                     namespace: namespace,                     pluginData: {                         importer: '',                     },                 };             });              build.onLoad({ filter: \/.*\/, namespace: namespace }, async (args) => {                 return {                     contents: text,                     pluginData: {                         importer: 'index.tsx',                     },                     loader: 'tsx',                 };             });         },     }; }; <\/code><\/pre>\n<p>\u042d\u0442\u0438\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u043c \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 <strong>&lt;stdin><\/strong> (\u0440\u0430\u043d\u0435\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435), \u043c\u044b \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c \u0435\u0435 \u0442\u0435\u0433\u043e\u043c virtual, \u041d\u0430 \u043d\u0435\u0433\u043e\u00a0\u043d\u0430\u0446\u0435\u043b\u0435\u043d \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 <strong>onLoad<\/strong> \u2014 \u043e\u043d, \u0432\u0438\u0434\u044f \u044d\u0442\u043e\u0442 \u0442\u0435\u0433, \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u043c\u0443 \u0442\u0435\u043a\u0441\u0442 \u0438\u0437 model-\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043b\u043e\u0430\u0434\u0435\u0440 \u0434\u043b\u044f <strong>tsx.<\/strong><\/p>\n<p><strong>pluginGlobalExternal<\/strong><\/p>\n<pre><code class=\"javascript\">export const pluginGlobalExternal = (): Plugin => {     return {         name: 'plugin-modules',         setup(build) {              build.onResolve({ filter: \/^([^\\.\\\/]).*\/ }, (args) => {                  const external = build.initialOptions.external?.includes(args.path);                  if (external) {                     return {                         path: args.path,                         namespace: `node_modules:external`,                         pluginData: {                             ...args.pluginData,                             package: args.path,                         },                     };                 }              });              build.onLoad({ filter: \/.*\/, namespace: `node_modules:external` }, async (args) => {                  const content = `module.exports = window['${args.path}'];`;                  return {                     contents: content,                     pluginData: {                         importer: args.path,                     },                     loader: 'js',                 };             });          },     }; }; <\/code><\/pre>\n<p>\u041f\u043b\u0430\u0433\u0438\u043d \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u043b\u044e\u0431\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 <strong>import &#8230; from \u2026,<\/strong> \u043f\u043e\u043c\u0435\u0447\u0430\u044f \u0438\u0445 \u043a\u0430\u043a \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 onLoad. \u041e\u043d,\u00a0\u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432\u0438\u0434\u0430 <strong>module.exports = window[&#8216;${args.path}&#8217;].<\/strong><\/p>\n<p>\u041f\u043e\u043b\u0435 <strong>pluginData<\/strong> \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u0434\u0435 \u043f\u0435\u0440\u0435\u0442\u0435\u043a\u0430\u0435\u0442 \u043f\u043e \u0446\u0435\u043f\u043e\u0447\u043a\u0435 \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432\u0430\u0436\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044f <strong>importer <\/strong>\u0438 <strong>path, <\/strong>\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0444\u043b\u0430\u0433 <strong>sourcemap <\/strong>(\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c <strong>inline<\/strong>).<\/p>\n<pre><code class=\"javascript\"> \/\/ node_modules:external:react   var require_react = __commonJS({     \"node_modules:external:react\"(exports, module) {       module.exports = window[\"react\"];     }   });    \/\/ node_modules:external:react-dom   var require_react_dom = __commonJS({<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-384666","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/384666","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=384666"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/384666\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=384666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=384666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=384666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}