https://lihautan.com/_app/immutable/nodes/42.61YqQ2E0.js

1import"../chunks/Bzak7iHL.js";import"../chunks/kfVmCPsV.js";import{p as $s,g as Us,d as Vs,b as Es,s as a,f as Zs,e as s,t as zs,a as Hs,r as o,n as e}from"../chunks/C2PHntuy.js";import{h as n}from"../chunks/C3QlhiH-.js";import{s as B}from"../chunks/CEusTUg_.js";import{i as Ys}from"../chunks/BQOOHHT8.js";import{l as Xs,s as Ks}from"../chunks/gzNpScmH.js";import{B as Qs}from"../chunks/B1caYEk9.js";const ns=""+new URL("../assets/ast-import.DS4qVtTh.png",import.meta.url).href,so=""+new URL("../assets/ast-import.DNIDZUkc.png",import.meta.url).href,oo=""+new URL("../assets/ast-import.BNFume4m.webp",import.meta.url).href,ao=""+new URL("../assets/ast-import.Bm6_Ngju.webp",import.meta.url).href,no=""+new URL("../assets/hero-twitter.BCEZWOBz.jpg",import.meta.url).href,es={title:"I wrote my module bundler",date:"2019-09-18T08:00:00Z",tags:["JavaScript","module bundler","dev tool","webpack"],description:"In my previous article, I explained how module bundler works. In this article, I am going to show you how I wrote my module bundler...",series:"Write a module bundler",label:"blog",tableOfContents:[{link:"getting-started",title:"Getting Started",nested:[{link:"the-input",title:"The Input"}]},{link:"writing",title:"Writing"},{link:"resolving",title:"Resolving"},{link:"bundling",title:"Bundling",nested:[{link:"grouping-modules-into-files",title:"Grouping modules into files"},{link:"creating-module-map",title:"Creating module map"},{link:"create-the-runtime",title:'Create the "runtime"'}]},{link:"optimisation",title:"Optimisation",nested:[{link:"circular-dependency",title:"Circular dependency"}]},{link:"summary",title:"Summary",nested:[{link:"whats-next",title:"Whats next?"}]},{link:"further-readings",title:"Further Readings"}]},{title:vo,date:uo,tags:xo,description:mo,series:go,label:fo,tableOfContents:wo}=es;var eo=Es(`<p>In my <a href="/what-is-module-bundler-and-how-does-it-work/">previous article</a>, I explained how module bundler works. I used <a href="https://webpack.js.org" rel="nofollow">webpack</a> and <a href="https://rollupjs.org" rel="nofollow">rollup</a> as example, how each of them gave us a different perspective on how we can bundle our JavaScript application.</p> <p>In this article, I am going to show you how I wrote my module bundler. The module bundler itself is not production-ready, yet I learned a ton through the exercise, and I am ever more appreciative of what modern module bundlers have provided.</p> <hr/> <p>⚠️ <strong>Warning: Tons of JavaScript code ahead. 🙈😱😨</strong> ⚠️</p> <hr/> <section><h2><a href="#getting-started" id="getting-started">Getting Started</a></h2> <p>I talked about the input (the JavaScript modules) and the output (the bundled JavaScript file) of a module bundler in <a href="/what-is-module-bundler-and-how-does-it-work/">my previous article</a>. Now it's time to write a module bundler that takes in the input and produces the output.</p> <p>A <em>basic</em> module bundler can be broken down into 2 parts:</p> <ul><li>Understands the code and constructs the dependency graph <strong>(Dependency Resolution)</strong></li> <li>Assembles the module into a single (or multiple) JavaScript file <strong>(Bundle)</strong></li></ul> <blockquote><p>A <strong>dependency graph</strong> is a graph representation of the dependency relationship between modules.</p></blockquote></section> <section><h3><a href="#the-input" id="the-input">The Input</a></h3> <p>In this article, I will be using following files as my input to the bundler:</p> <div class="code-section"><!></div> <div class="code-section"><!></div> <div class="code-section"><!></div> <p>I've created the project on <a href="https://github.com/tanhauhau/byo-bundler/tree/master/fixture" rel="nofollow">Github</a>, so if you are interested to try out yourself, you can clone it and checkout the <code class="inline">fixture-1</code> tag. The input files are in the <code class="inline">fixture/</code> folder.</p></section> <section><h2><a href="#writing" id="writing">Writing</a></h2> <p>I started with the main structure of the module bundler:</p> <div class="code-section"><!></div> <blockquote><p>The <strong>dependency graph</strong> is a <a href="https://en.wikipedia.org/wiki/Directed_graph" rel="nofollow">directed graph</a>, where the vertex is the module, and the directed edge is the dependency relationship between the modules.</p></blockquote> <div class="code-section"><!></div> <p>So, the entry module is "the root" of the graph.</p> <p>In <code class="inline">createModule</code>, I instantiate a new <code class="inline">Module</code> instance:</p> <div class="code-section"><!></div> <p>The class <code class="inline">Module</code> will be used to record module properties, such as the content, the dependencies, exported keys, etc.</p> <div class="code-section"><!></div> <p>While the <code class="inline">content</code> is the string content of the module, to understand what it actually means, I used <a href="http://babeljs.io" rel="nofollow">babel</a> to <em>parse the content</em> into AST (Abstract Syntax Tree):</p> <div class="code-section"><!></div> <p>Next, I need to find out the dependency of this module:</p> <div class="code-section"><!></div> <p>So, how can I know what are the dependencies of this module?</p> <p>I can look for the <code class="inline">import</code> statement from the AST with the help of the <a href="https://lihautan.com/babel-ast-explorer/#?eyJiYWJlbFNldHRpbmdzIjp7InZlcnNpb24iOiI3Lj

1QuNSJ9LCJ0cmVlU2V0dGluZ3MiOnsiaGlkZUVtcHR5Ijp0cnVlLCJoaWRlTG9jYXRpb24iOnRydWUsImhpZGVUeXBlIjp0cnVlfSwiY29kZSI6ImltcG9ydCBzcXVhcmVBcmVhIGZyb20gJy4vc3F1YXJlLmpzJztcbmltcG9ydCBjaXJjbGVBcmVhIGZyb20gJy4vY2lyY2xlLmpzJztcblxuY29uc29sZS5sb2coJ0FyZWEgb2Ygc3F1YXJlOiAnLCBzcXVhcmVBcmVhKDUpKTtcbmNvbnNvbGUubG9nKCdBcmVhIG9mIGNpcmNsZScsIGNpcmNsZUFyZWEoNSkpO1xuIn0=" rel="nofollow">babel-ast-explorer</a>.</p> <p><span style="display: block; position: relative; padding-top: 38.672%; width: 100%;"><picture><source type="image/webp"/><img loading="lazy" style="position: absolute; top: 0; width: 100%; height: 100%" alt="babel-ast-explorer" title="Visualizing AST through babel-ast-explorer"/></picture></span></p> <p>I found out that the <code class="inline">import</code> statement in the AST is called the <code class="inline">ImportDeclaration</code>. It has <code class="inline">specifiers</code> and <code class="inline">source</code>, which the <code class="inline">source.value</code> tells us what this module is importing from:</p> <div class="code-section"><!></div> <p>So I had the path that the module is requesting, but it could be relative to the current file, eg <code class="inline">"./foo/bar"</code>, or from the <code class="inline">node_modules</code>, eg: <code class="inline">"lodash"</code>. How do I know what is the <strong>actual file path</strong> that the module is requesting?</p> <p>The step of figuring out the actual path based on the requested path, is called <strong>"Resolving"</strong>:</p> <div class="code-section"><!></div> <p><em>Resolving path to the actual file path</em></p></section> <section><h2><a href="#resolving" id="resolving">Resolving</a></h2> <p>Let's talk about resolving. We know that "import"ing <code class="inline">./b.js</code> in the following examples will result in getting a different file, because when we specify <code class="inline">./</code>, we are "import"ing relative to the current file.</p> <div class="code-section"><!></div> <div class="code-section"><!></div> <p>So, what are the rules of resolving a module?</p> <p>The Node.js documentation has listed out the <a href="http://nodejs.org/api/modules.html#modules_all_together" rel="nofollow">detailed step of the module resolving algorithm</a>:</p> <p>When we specify a relative path, <code class="inline">./b</code>, Node.js will first assume that <code class="inline">./b</code> is a file, and tries the following extension if it doesn't exactly match the file name:</p> <div class="code-section"><!></div> <p>If the file does not exist, Node.js will then try to treat <code class="inline">./b</code> as a directory, and try the following:</p> <div class="code-section"><!></div> <p>If we specify <code class="inline">import 'b'</code> instead, Node.js will treat it as a package within <code class="inline">node_modules/</code>, and have a different resolving strategy.</p> <p>Through the above illustration, we can see that resolving <code class="inline">import './b'</code> is not as simple as it seems. Besides the default Node.js resolving behaviour, <a href="https://webpack.js.org/configuration/resolve/" rel="nofollow">webpack provides a lot more customisation options</a>, such as custom extensions, alias, modules folders, etc.</p> <p>Here, I am showing you the <em>"simplest"</em> resolver, which is to resolve relative path only:</p> <div class="code-section"><!></div> <blockquote><small>**Note:** You should try out writing a full node resolvers that resolve relatively as well as absolutely from \`node_modules/\`</small></blockquote> <p>Now I know the actual requested file paths, I then create modules out of them.</p> <div class="code-section"><!></div> <p>So, for each module, I find their dependencies, parse them, and find each dependency's dependencies, parse them as well, and find their dependencies, and so forth recursively. At the end of the process, I get a module dependency graph that looks something like this:</p> <div class="code-section"><!></div> <p>The root of the graph is our entry module, and you can traverse the graph through the <code class="inline">dependencies</code> of the module. As you can see, the <code class="inline">index.js</code> has 2 dependencies, the <code class="inline">square.js</code> and the <code class="inline">circle.js</code>.</p> <blockquote><small>**Note:** If you are following along, you can checkout the tag \`feat-1-module-dependency-graph\`, to see the code that I had written up till this point.</small></blockquote></section> <section><h2><a href="#bundling" id="bundling">Bundling</a></h2> <p>With the module dependency graph, it's time to bundle them into a file!</p> <p>

1At this point in time, we can choose whether we want to bundle it in the <strong>"webpack way"</strong> or the <strong>"rollup way"</strong>. In this article I am showing you how I did it the <strong>"webpack way"</strong>. I'll write about bundling in the <strong>"rollup way"</strong> in the coming article.</p> <blockquote><p>If you have no idea about what is the <strong>"webpack way"</strong> or <strong>"rollup way"</strong>, I have "coined" the term in my <a href="/what-is-module-bundler-and-how-does-it-work/">previous article</a> and have detailed explanation about them!</p></blockquote> <p>Let's take a look how the final bundled file would look like:</p> <div class="code-section"><!></div> <p>Let's break it down to a few steps:</p> <ul><li><strong>Group modules into files</strong></li> <li><strong>Create the module map</strong> and wrapping each module in a "special" module factory function</li> <li><strong>Create the "runtime"</strong>, the glue that links each module together.</li></ul></section> <section><h3><a href="#grouping-modules-into-files" id="grouping-modules-into-files">Grouping modules into files</a></h3> <p>This step is to decide which modules goes to which file. We can split modules into different files because of <a href="https://webpack.js.org/guides/code-splitting/" rel="nofollow">code splitting</a> due to dynamic import as well as optimisation, such as the webpack's <a href="https://webpack.js.org/plugins/split-chunks-plugin/" rel="nofollow">Chunk Splitting</a>.</p> <p>I will support code splitting in the future. For now, I grouped all modules into 1 file.</p> <p>To collect all the modules from module graph into a list of modules, I did a graph traversal:</p> <div class="code-section"><!></div> <p>...and I used the list of modules to create a module map.</p></section> <section><h3><a href="#creating-module-map" id="creating-module-map">Creating module map</a></h3> <p>The module map I created is a string, that would be inlined into the final bundle file.</p> <p>I looped through each module, and used <code class="inline">module.filePath</code> as the key, and <code class="inline">module.content</code> as the value.</p> <p>The reason I dont use <code class="inline">JSON.stringify(moduleMap)</code> instead of manually concatenating to build up the module map, is because JSON can only takes in <a href="https://documentation.progress.com/output/ua/OpenEdge_latest/index.html#page/dvjsn/json-data-types.html" rel="nofollow">JSON primitive data type</a> as value, but what I built here is a JavaScript map, with <code class="inline">function</code> as value, but in string.</p> <div class="code-section"><!></div> <p>The function that wraps around the <code class="inline">module.content</code> is called the module factory function. It provides 2 parameter to the module:</p> <ul><li><code class="inline">exports</code>, an object that the module can assign its exported value onto</li> <li><code class="inline">require</code>, a function that the module can invoke with module path to import exported value from another module</li></ul> <p>The module map right now is not something that can be executed:</p> <div class="code-section"><!></div> <p>because it still uses <code class="inline">import</code> and <code class="inline">export</code>. I had to transform them to use the <code class="inline">exports</code> and <code class="inline">require</code> that we pass in.</p> <p>To transform the code, I used the AST of the module again: trasform the ast and generate the new code from the transformed ast.</p> <p>What I need is to trasform the "from" to "to" of the following:</p> <div class="code-section"><!></div> <blockquote><p>I wrote a <a href="/step-by-step-guide-for-writing-a-babel-transformation">step by step guide</a> on how to write babel transformation, please do check it out.</p></blockquote> <p>Knowing <strong>what to target on AST</strong> and <strong>how the transformed AST look like</strong>, I wrote my transformation code:</p> <div class="code-section"><!></div> <p>

1I omitted the actual babel transformation code, because it is lengthy. If you are interested to read about it, you can check out <a href="https://github.com/tanhauhau/byo-bundler/blob/feat-2-bundling/src/index.js#L46-L138" rel="nofollow">from my Github repo</a></p> <p>So, now the module map looks ready:</p> <div class="code-section"><!></div> <p>One thing to take note is that, for the <code class="inline">require</code> statements, I replaced the requested path to the actual resolved path, because I used the actual resolved path as the key to the module map.</p></section> <section><h3><a href="#create-the-runtime" id="create-the-runtime"><strong>Create the "runtime"</strong></a></h3> <p>Now it's time to create the runtime. The runtime is a piece of code that is part of the output bundle, that runs when the application code is running, therefore, the runtime.</p> <p>The runtime code can be from a template file, but for simplicity sake, I kept the runtime code as a string:</p> <div class="code-section"><!></div> <p>The code above is self explanatory, except if you have no idea what does the <code class="inline">webpackStart()</code> do, you can read more about it in <a href="/what-is-module-bundler-and-how-does-it-work/">my previous post</a>.</p> <p>Finally, I returned the module code from the <code class="inline">bundle</code> function:</p> <div class="code-section"><!></div> <p>Now I run my bundler, it generates a <code class="inline">output/bundle.js</code> file. I run the generated file with node and I see:</p> <div class="code-section"><!></div> <p>That's it! A working module bundler!</p> <p>Of course, the module bundler I've shown here is <strong>nowhere near webpack</strong>. Webpack supports more module system, resolving strategies, loading strategies, plugin system, optimisation, and many many more.</p></section> <section><h2><a href="#optimisation" id="optimisation">Optimisation</a></h2> <p>I played around my module bundler, and I quickly noticed a bug: <strong>Circular Dependency</strong>.</p> <p>Here's my input files that I've tweaked:</p> <div class="code-section"><!></div> <div class="code-section"><!></div> <p>When I ran it through my module bunlder, immediately it ran into a stack overflow:</p> <div class="code-section"><!></div></section> <section><h3><a href="#circular-dependency" id="circular-dependency">Circular dependency</a></h3> <p>There were 2 junctures that the code did recursive traversal which have led to the endless loop:</p> <ul><li>Generating dependency graphs</li> <li>Traversing module graph for bundling</li></ul> <div class="code-section"><!></div> <p>Bundle with the latest code, the stack overflow is gone. However when I executed the output bundle, I saw</p> <div class="code-section"><!></div> <p>So I took a look at the output bundle:</p> <div class="code-section"><!></div> <p>So, the problem is that I destructed <code class="inline">PI</code> from the exports of <code class="inline">index.js</code> before it is defined, so naturally <code class="inline">PI</code> within <code class="inline">circle.js</code> would stay as <code class="inline">undefined</code> throughout the application. However before I called <code class="inline">circleArea</code>, we defined <code class="inline">PI</code> on the <code class="inline">index.js</code>'s export, I am expecting it to be available.</p> <p>So I built my application with webpack and took a look at how webpack solved this problem.</p> <div class="code-section"><!></div> <p>Brilliant! The key is to lazily get the value of <code class="inline">PI</code> when needed!</p> <p>I changed my babel transformation code, which I am not showing it here. If you are curious enough, you can check out <a href="https://github.com/tanhauhau/byo-bundler/compare/feat-2-bundling...feat-3-circular-dependency" rel="nofollow">the changes I made from Github</a>.</p></section> <section><h2><a href="#summary" id="summary">Summary</a></h2> <p>There's two phases in module bundling: <strong>Dependency Resolution</strong> and <strong>Bundling</strong>.</p> <p>I showed you how I constructed the dependency graph, by finding import statements and resolving modules. I shared how I created module maps and transformed the imports / exports syntax during <strong>bundling</strong>. Lastly, I fixed the circular dependency bug that was in the first version of my module bundler.</p></section> <section><h3><a href="#whats-next" id="whats-next">Whats next?</a></h3> <p>I have a few ideas that I will add to my module bundler, such as:</p> <ul><li>code spliting</li> <li>watch mode and reloading</li></ul> <p>which I will cover them in my next article when they are ready.</p> <p>Till then. Cheers. 😎</p></section> <section><h2><a href="#further-readings" id="further-readings">Further Readings</a></h2> <ul><li><a href="https://www.youtube.com/watch?v=Gc9-7PBqOC8" rel="nofollow">Ronen Amiel, Build Your Own Webpack - You Gotta Love Frontend 2018</a></li> <li><a href="https://slides.com/lucianomammino/unbundling-the-javascript-module-bundler-dublinjs" rel="nofollow">Luciano Mammino, Unbundling the JavaScript module bundler - DublinJS July 2018</a></li> <li><a href="https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/" rel="nofollow">Adam Kelly, Let’s learn how module bundlers work and then write one ourselves</a></li> <li><a href="https://www.youtube.com/watch?v=UNMkLHzofQI" rel="nofollow">Webpack founder Tobias Koppers demos bundling live by hand</a></li></ul></section>`,1);function bo(ts,O){const ls=Xs(O,["children","$$slots","$$events","$$legacy"]);

1$s(O,!1),Us("blog",{image:no}),Ys(),Qs(ts,Ks(()=>ls,()=>es,{children:(rs,to)=>{var W=eo(),t=a(Zs(W),12),l=a(s(t),4),is=s(l);n(is,()=>`<div class="filename">index.js</div><pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> squareArea </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;./square.js&#39;</span><span style="color: var(--shiki-color-text)">;</span></span>
2<span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> circleArea </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;./circle.js&#39;</span><span style="color: var(--shiki-color-text)">;</span></span>
3<span class="line"></span>
4<span class="line"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of square: &#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">squareArea</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span>
5<span class="line"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of circle&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">circleArea</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span></code></pre>`),o(l);var r=a(l,2),ps=s(r);n(ps,()=>`<div class="filename">square.js</div><pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">area</span><span style="color: var(--shiki-color-text)">(side) &#123;</span></span>
6<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> side </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> side;</span></span>
7<span class="line"><span style="color: var(--shiki-color-text)">&#125;</span></span>
8<span class="line"><span style="color: var(--shiki-token-keyword)">export</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">default</span><span style="color: var(--shiki-color-text)"> area;</span></span></code></pre>`),o(r);var $=a(r,2),cs=s($);n(cs,()=>`<div class="filename">circle.js</div><pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">3.141</span><span style="color: var(--shiki-color-text)">;</span></span>
9<span class="line"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">area</span><span style="color: var(--shiki-color-text)">(radius) &#123;</span></span>
10<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)">

10 radius </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> radius;</span></span>
11<span class="line"><span style="color: var(--shiki-color-text)">&#125;</span></span>
12<span class="line"><span style="color: var(--shiki-token-keyword)">export</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">default</span><span style="color: var(--shiki-color-text)"> area;</span></span></code></pre>`),o($),e(2),o(t);var i=a(t,2),p=a(s(i),4),ks=s(p);n(ks,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">build</span><span style="color: var(--shiki-color-text)">(&#123; entryFile</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> outputFolder &#125;) &#123;</span></span>
13<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-comment)">// build dependency graph</span></span>
14<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">graph</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">createDependencyGraph</span><span style="color: var(--shiki-color-text)">(entryFile);</span></span>
15<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-comment)">// bundle the asset</span></span>
16<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">outputFiles</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">bundle</span><span style="color: var(--shiki-color-text)">(graph);</span></span>
17<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-comment)">// write to output folder</span></span>
18<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">for</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">outputFile</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">of</span><span style="color: var(--shiki-color-text)"> outputFiles) &#123;</span></span>
19<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">fs</span><span style="color: var(--shiki-token-function)">.writeFileSync</span><span style="color: var(--shiki-color-text)">(</span></span>
20<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-constant)">path</span><span style="color: var(--shiki-token-function)">.join</span><span style="color: var(--shiki-color-text)">(outputFolder</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">outputFile</span><span style="color: var(--shiki-color-text)">.name)</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
21<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-constant)">outputFile</span><span style="color: var(--shiki-color-text)">.content</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
22<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-string-expression)">&#39;utf-8&#39;</span></span>
23<span class="line"><span style="color: var(--shiki-color-text)">    )</span></span>
24<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span></span>
25<span class="line"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(p);var c=a(p,4),hs=s(c);n(hs,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">createDependencyGraph</span><span style="color: var(--shiki-color-text)">(entryFile) &#123;</span></span>
26<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">rootModule</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">createModule</span><span style="color: var(--shiki-color-text)">(entryFile);</span></span>
27<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> rootModule;</span></span>
28<span class="line"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(c);var k=a(c,6),ys=s(k);n(ys,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">createModule</span><span style="color: var(--shiki-color-text)">(filePath) &#123;</span></span>
29<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">new</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">Module</span><span style="color: var(--shiki-color-text)">(filePath);</span></span>
30<span class="line"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(k);var h=a(k,4),vs=s(h);n(vs,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-keyword)">class</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">Module</span><span style="color: var(--shiki-color-text)"> &#123;</span></span>
31<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">constructor</span><span style="color: var(--shiki-color-text)">(filePath) &#123;</span></span>
32<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.filePath </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> filePath;</span></span>
33<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.content </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">fs</span><span style="color: var(--shiki-token-function)">.readFileSync</span><span style="color: var(--shiki-color-text)">(filePath</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;utf-8&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
34<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">

34.dependencies </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> [];</span></span>
35<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span></span>
36<span class="line"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(h);var y=a(h,4),ds=s(y);n(ds,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line highlight"><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">babel</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;@babel/core&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
37<span class="line dim"></span>
38<span class="line dim"><span style="color: var(--shiki-token-keyword)">class</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">Module</span><span style="color: var(--shiki-color-text)"> &#123;</span></span>
39<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">constructor</span><span style="color: var(--shiki-color-text)">(filePath) &#123;</span></span>
40<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.filePath </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> filePath;</span></span>
41<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.content </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">fs</span><span style="color: var(--shiki-token-function)">.readFileSync</span><span style="color: var(--shiki-color-text)">(filePath</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;utf-8&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
42<span class="line highlight"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.ast </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">babel</span><span style="color: var(--shiki-token-function)">.parseSync</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.content);</span></span>
43<span class="line dim"><span style="color: var(--shiki-color-text)">  &#125;</span></span>
44<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(y);var v=a(y,4),us=s(v);n(us,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line dim"><span style="color: var(--shiki-token-keyword)">class</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">Module</span><span style="color: var(--shiki-color-text)"> &#123;</span></span>
45<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">constructor</span><span style="color: var(--shiki-color-text)">(filePath) &#123;</span></span>
46<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.filePath </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> filePath;</span></span>
47<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.content </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">fs</span><span style="color: var(--shiki-token-function)">.readFileSync</span><span style="color: var(--shiki-color-text)">(filePath</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;utf-8&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
48<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.ast </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">babel</span><span style="color: var(--shiki-token-function)">.parseSync</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.content);</span></span>
49<span class="line highlight"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">

49.dependencies </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-token-function)">.findDependencies</span><span style="color: var(--shiki-color-text)">();</span></span>
50<span class="line highlight"><span style="color: var(--shiki-color-text)">  &#125;</span></span>
51<span class="line highlight"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-function)">findDependencies</span><span style="color: var(--shiki-color-text)">() &#123;</span></span>
52<span class="line highlight"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-comment)">//</span></span>
53<span class="line highlight"><span style="color: var(--shiki-color-text)">  &#125;</span></span>
54<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(v);var d=a(v,6),U=s(d),V=s(U),E=s(V),Z=a(E);o(V),o(U),o(d);var u=a(d,4),xs=s(u);n(xs,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line dim"><span style="color: var(--shiki-token-function)">findDependencies</span><span style="color: var(--shiki-color-text)">() &#123;</span></span>
55<span class="line highlight"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-constant)">ast</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-constant)">program</span><span style="color: var(--shiki-color-text)">.body</span></span>
56<span class="line highlight"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-function)">.filter</span><span style="color: var(--shiki-color-text)">(node </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">node</span><span style="color: var(--shiki-color-text)">.type </span><span style="color: var(--shiki-token-keyword)">===</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;ImportDeclaration&#39;</span><span style="color: var(--shiki-color-text)">)</span></span>
57<span class="line highlight"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-function)">.map</span><span style="color: var(--shiki-color-text)">(node </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">node</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-constant)">source</span><span style="color: var(--shiki-color-text)">.value)</span></span>
58<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(u);var z=a(u,6),ms=s(z);n(ms,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line dim"><span style="color: var(--shiki-token-function)">findDependencies</span><span style="color: var(--shiki-color-text)">() &#123;</span></span>
59<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-constant)">ast</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-constant)">program</span><span style="color: var(--shiki-color-text)">.body</span></span>
60<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-function)">.filter</span><span style="color: var(--shiki-color-text)">(node </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">node</span><span style="color: var(--shiki-color-text)">.type </span><span style="color: var(--shiki-token-keyword)">===</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;ImportDeclaration&#39;</span><span style="color: var(--shiki-color-text)">)</span></span>
61<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-function)">.map</span><span style="color: var(--shiki-color-text)">(node </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">node</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-constant)">source</span><span style="color: var(--shiki-color-text)">.value)</span></span>
62<span class="line highlight"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-function)">.map</span><span style="color: var(--shiki-color-text)">(relativePath </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">resolveRequest</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.filePath</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> relativePath))</span></span>
63<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span>
64<span class="line dim"></span>
65<span class="line dim"><span style="color: var(--shiki-token-comment)">// resolving</span></span>
66<span class="line dim"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">resolveRequest</span><span style="color: var(--shiki-color-text)">(requester</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> requestedPath) &#123;</span></span>
67<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-comment)">//</span></span>
68<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(z),e(2),o(i);var x=a(i,2),m=a(s(x),4),gs=s(m);n(gs,()=>'<div class="filename">project/a.js</div><pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-keyword)">

68import</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;./b.js&#39;</span><span style="color: var(--shiki-color-text)">;</span></span></code></pre>'),o(m);var g=a(m,2),fs=s(g);n(fs,()=>'<div class="filename">project/foo/a.js</div><pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;./b.js&#39;</span><span style="color: var(--shiki-color-text)">;</span></span></code></pre>'),o(g);var f=a(g,8),ws=s(f);n(ws,()=>`<pre class="prism language-"><code><span class="line">b</span>
69<span class="line">b.js</span>
70<span class="line">b.json</span>
71<span class="line">b.node</span></code></pre>`),o(f);var w=a(f,4),bs=s(w);n(bs,()=>`<pre class="prism language-"><code><span class="line">&quot;main&quot; in b/package.json</span>
72<span class="line">b/index.js</span>
73<span class="line">b/index.json</span>
74<span class="line">b/index.node</span></code></pre>`),o(w);var b=a(w,8),Is=s(b);n(Is,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">path</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;path&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
75<span class="line"><span style="color: var(--shiki-token-comment)">// resolving</span></span>
76<span class="line"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">resolveRequest</span><span style="color: var(--shiki-color-text)">(requester</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> requestedPath) &#123;</span></span>
77<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">path</span><span style="color: var(--shiki-token-function)">.join</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">path</span><span style="color: var(--shiki-token-function)">.dirname</span><span style="color: var(--shiki-color-text)">(requester)</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> requestedPath);</span></span>
78<span class="line"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(b);var I=a(b,6),_s=s(I);n(_s,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line dim"><span style="color: var(--shiki-token-function)">findDependencies</span><span style="color: var(--shiki-color-text)">() &#123;</span></span>
79<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-constant)">ast</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-constant)">program</span><span style="color: var(--shiki-color-text)">.body</span></span>
80<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-function)">.filter</span><span style="color: var(--shiki-color-text)">(node </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">node</span><span style="color: var(--shiki-color-text)">.type </span><span style="color: var(--shiki-token-keyword)">===</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;ImportDeclaration&#39;</span><span style="color: var(--shiki-color-text)">)</span></span>
81<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-function)">.map</span><span style="color: var(--shiki-color-text)">(node </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">node</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-constant)">source</span><span style="color: var(--shiki-color-text)">.value)</span></span>
82<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-function)">.map</span><span style="color: var(--shiki-color-text)">(relativePath </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">resolveRequest</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.filePath</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> relativePath))</span></span>
83<span class="line highlight"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-function)">.map</span><span style="color: var(--shiki-color-text)">(absolutePath </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">createModule</span><span style="color: var(--shiki-color-text)">(absolutePath))</span></span>
84<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(I);var H=a(I,4),qs=s(H);n(qs,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-color-text)">Module &#123;</span></span>
85<span class="line"><span style="color: var(--shiki-color-text)">  filePath</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;/Projects/byo-bundler/fixture/index.js&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
86<span class="line"><span style="color: var(--shiki-color-text)">  content</span><span style="color: var(--shiki-token-punctuation)">:</span></span>
87<span class="line"><span style="color: var(--shiki-color-text)">   </span><span style="color: var(--shiki-token-string-expression)">&#39;import squareArea from &#39;./square.js&#39;;&#92;nimport circleArea from &#39;./circle.js&#39;;&#92;n&#92;nconsole.log(&#39;Area of square: &#39;, squareArea(5));&#92;nconsole.log(&#39;Area of circle&#39;, circleArea(5));&#92;n&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
88<span class="line"><span style="color: var(--shiki-color-text)">  ast</span><span style="color: var(--shiki-token-punctuation)">:</span></span>
89<span class="line"><span style="color: var(--shiki-color-text)">   Node &#123; </span><span style="color: var(--shiki-token-comment)">/*...*/</span><span style="color: var(--shiki-color-text)"> &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
90<span class="line"><span style="color: var(--shiki-color-text)">  dependencies</span><span style="color: var(--shiki-token-punctuation)">:</span></span>
91<span class="line"><span style="color: var(--shiki-color-text)">   [ Module &#123;</span></span>
92<span class="line"><span style="color: var(--shiki-color-text)">       filePath</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;/Projects/byo-bundler/fixture/square.js&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
93<span class="line"><span style="color: var(--shiki-color-text)">       content</span><span style="color: var(--shiki-token-keyword)">:</span></span>
94<span class="line"><span style="color: var(--shiki-color-text)">        </span><span style="color: var(--shiki-token-string-expression)">&#39;function area(side) &#123;&#92;n  return side * side;&#92;n&#125;&#92;nexport default area;&#92;n&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
95<span class="line"><span style="color: var(--shiki-color-text)">       ast</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> Node &#123;</span><span style="color: var(--shiki-token-comment)">/* ... */</span><span style="color: var(--shiki-color-text)">&#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
96<span class="line"><span style="color: var(--shiki-color-text)">       dependencies</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> []</span></span>
97<span class="line"><span style="color: var(--shiki-color-text)">      &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
98<span class="line"><span style="color: var(--shiki-color-text)">     Module &#123;</span></span>
99<span class="line"><span style="color: var(--shiki-color-text)">       filePath</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;/Projects/byo-bundler/fixture/circle.js&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
100<span class="line"><span style="color: var(--shiki-color-text)">       content</span><span style="color: var(--shiki-token-keyword)">:</span></span>
101<span class="line"><span style="color: var(--shiki-color-text)">        </span><span style="color: var(--shiki-token-string-expression)">&#39;const PI = 3.141;&#92;nfunction area(radius) &#123;&#92;n    return PI * radius * radius;&#92;n&#125;&#92;nexport default area;&#92;n&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
102<span class="line"><span style="color: var(--shiki-color-text)">       ast</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> Node &#123;</span><span style="color: var(--shiki-token-comment)">/* ... */</span><span style="color: var(--shiki-color-text)">&#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
103<span class="line"><span style="color: var(--shiki-color-text)">       dependencies</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> []</span></span>
104<span class="line"><span style="color: var(--shiki-color-text)">      &#125;</span></span>
105<span class="line"><span style="color: var(--shiki-color-text)">   ]</span></span>
106<span class="line"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(H),e(4),o(x);var _=a(x,2),Y=a(s(_),10),js=s(Y);n(js,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">modules</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> &#123;</span></span>
107<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&#39;circle.js&#39;</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
108<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">3.141</span><span style="color: var(--shiki-color-text)">;</span></span>
109<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">exports</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-function)">default</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">area</span><span style="color: var(--shiki-color-text)">(radius) &#123;</span></span>
110<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)">

110 radius </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> radius;</span></span>
111<span class="line"><span style="color: var(--shiki-color-text)">    &#125;;</span></span>
112<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
113<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&#39;square.js&#39;</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
114<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">exports</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-function)">default</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">area</span><span style="color: var(--shiki-color-text)">(side) &#123;</span></span>
115<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> side </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> side;</span></span>
116<span class="line"><span style="color: var(--shiki-color-text)">    &#125;;</span></span>
117<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
118<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&#39;app.js&#39;</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
119<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">squareArea</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;square.js&#39;</span><span style="color: var(--shiki-color-text)">).default;</span></span>
120<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">circleArea</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;circle.js&#39;</span><span style="color: var(--shiki-color-text)">).default;</span></span>
121<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of square: &#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">squareArea</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span>
122<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of circle&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">circleArea</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span>
123<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
124<span class="line"><span style="color: var(--shiki-color-text)">&#125;;</span></span>
125<span class="line"></span>
126<span class="line"><span style="color: var(--shiki-token-function)">webpackStart</span><span style="color: var(--shiki-color-text)">(&#123;</span></span>
127<span class="line"><span style="color: var(--shiki-color-text)">  modules</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
128<span class="line"><span style="color: var(--shiki-color-text)">  entry</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;app.js&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
129<span class="line"><span style="color: var(--shiki-color-text)">&#125;);</span></span></code></pre>`),o(Y),e(4),o(_);var q=a(_,2),X=a(s(q),8),As=s(X);n(As,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line dim"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">bundle</span><span style="color: var(--shiki-color-text)">(graph) &#123;</span></span>
130<span class="line highlight"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-function)">collectModules</span><span style="color: var(--shiki-color-text)">(graph);</span></span>
131<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> [];</span></span>
132<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span>
133<span class="line dim"></span>
134<span class="line dim"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">collectModules</span><span style="color: var(--shiki-color-text)">(graph) &#123;</span></span>
135<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">modules</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> [];</span></span>
136<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-function)">collect</span><span style="color: var(--shiki-color-text)">(graph</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> modules);</span></span>
137<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> modules;</span></span>
138<span class="line dim"></span>
139<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">collect</span><span style="color: var(--shiki-color-text)">(module</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> modules) &#123;</span></span>
140<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">modules</span><span style="color: var(--shiki-token-function)">.push</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-color-text)">);</span></span>
141<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-token-function)">

141.</span><span style="color: var(--shiki-token-constant)">dependencies</span><span style="color: var(--shiki-token-function)">.forEach</span><span style="color: var(--shiki-color-text)">(dependency </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">collect</span><span style="color: var(--shiki-color-text)">(dependency</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> modules));</span></span>
142<span class="line dim"><span style="color: var(--shiki-color-text)">  &#125;</span></span>
143<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(X),e(2),o(q);var j=a(q,2),A=a(s(j),8),Ps=s(A);n(Ps,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line dim"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">bundle</span><span style="color: var(--shiki-color-text)">(graph) &#123;</span></span>
144<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">modules</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">collectModules</span><span style="color: var(--shiki-color-text)">(graph);</span></span>
145<span class="line highlight"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">moduleMap</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">toModuleMap</span><span style="color: var(--shiki-color-text)">(modules);</span></span>
146<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> [];</span></span>
147<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span>
148<span class="line dim"></span>
149<span class="line dim"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">toModuleMap</span><span style="color: var(--shiki-color-text)">(modules) &#123;</span></span>
150<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">let</span><span style="color: var(--shiki-color-text)"> moduleMap </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;&#39;</span><span style="color: var(--shiki-color-text)">;</span></span>
151<span class="line dim"><span style="color: var(--shiki-color-text)">  moduleMap </span><span style="color: var(--shiki-token-keyword)">+=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;&#123;&#39;</span><span style="color: var(--shiki-color-text)">;</span></span>
152<span class="line dim"></span>
153<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">for</span><span style="color: var(--shiki-color-text)"> (</span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">of</span><span style="color: var(--shiki-color-text)"> modules) &#123;</span></span>
154<span class="line dim"><span style="color: var(--shiki-color-text)">    moduleMap </span><span style="color: var(--shiki-token-keyword)">+=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#96;&quot;</span><span style="color: var(--shiki-token-keyword)">$&#123;</span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-color-text)">.filePath</span><span style="color: var(--shiki-token-keyword)">&#125;</span><span style="color: var(--shiki-token-string-expression)">&quot;: &#96;</span><span style="color: var(--shiki-color-text)">;</span></span>
155<span class="line dim"><span style="color: var(--shiki-color-text)">    moduleMap </span><span style="color: var(--shiki-token-keyword)">+=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#96;function(exports, require) &#123; </span><span style="color: var(--shiki-token-keyword)">$&#123;</span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-color-text)">.content</span><span style="color: var(--shiki-token-keyword)">&#125;</span><span style="color: var(--shiki-token-string-expression)"> &#125;,&#96;</span><span style="color: var(--shiki-color-text)">;</span></span>
156<span class="line dim"><span style="color: var(--shiki-color-text)">  &#125;</span></span>
157<span class="line dim"></span>
158<span class="line dim"><span style="color: var(--shiki-color-text)">  moduleMap </span><span style="color: var(--shiki-token-keyword)">+=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;&#125;&#39;</span><span style="color: var(--shiki-color-text)">;</span></span>
159<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> moduleMap;</span></span>
160<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(A);var P=a(A,8),Ms=s(P);n(Ms,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-color-text)">&#123;</span></span>
161<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&quot;index.js&quot;</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
162<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">

162import</span><span style="color: var(--shiki-color-text)"> squareArea </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;./square.js&#39;</span><span style="color: var(--shiki-color-text)">;</span></span>
163<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> circleArea </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;./circle.js&#39;</span><span style="color: var(--shiki-color-text)">;</span></span>
164<span class="line"></span>
165<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of square: &#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">squareArea</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span>
166<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of circle&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">circleArea</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span>
167<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
168<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&quot;square.js&quot;</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
169<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">area</span><span style="color: var(--shiki-color-text)">(side) &#123;</span></span>
170<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> side </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> side;</span></span>
171<span class="line"><span style="color: var(--shiki-color-text)">    &#125;</span></span>
172<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">export</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">default</span><span style="color: var(--shiki-color-text)"> area;</span></span>
173<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
174<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&quot;circle.js&quot;</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
175<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">3.141</span><span style="color: var(--shiki-color-text)">;</span></span>
176<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">area</span><span style="color: var(--shiki-color-text)">(radius) &#123;</span></span>
177<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)">

177 radius </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> radius;</span></span>
178<span class="line"><span style="color: var(--shiki-color-text)">    &#125;</span></span>
179<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">export</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">default</span><span style="color: var(--shiki-color-text)"> area;</span></span>
180<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
181<span class="line"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(P);var M=a(P,8),Ss=s(M);n(Ss,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-comment)">// #1</span></span>
182<span class="line"><span style="color: var(--shiki-token-comment)">// from</span></span>
183<span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> a</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> &#123; b</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> c &#125; </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;foo&#39;</span><span style="color: var(--shiki-color-text)">;</span></span>
184<span class="line"><span style="color: var(--shiki-token-comment)">// to</span></span>
185<span class="line"><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> &#123; default: </span><span style="color: var(--shiki-token-constant)">a</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">b</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">c</span><span style="color: var(--shiki-color-text)"> &#125; </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;foo&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
186<span class="line"></span>
187<span class="line"><span style="color: var(--shiki-token-comment)">// #2</span></span>
188<span class="line"><span style="color: var(--shiki-token-keyword)">export</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">default</span><span style="color: var(--shiki-color-text)"> a;</span></span>
189<span class="line"><span style="color: var(--shiki-token-keyword)">export</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">b</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">2</span><span style="color: var(--shiki-color-text)">;</span></span>
190<span class="line"><span style="color: var(--shiki-token-keyword)">export</span><span style="color: var(--shiki-color-text)"> &#123; c &#125;;</span></span>
191<span class="line"><span style="color: var(--shiki-token-comment)">// to</span></span>
192<span class="line"><span style="color: var(--shiki-token-constant)">exports</span><span style="color: var(--shiki-color-text)">.default </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> a;</span></span>
193<span class="line"><span style="color: var(--shiki-token-constant)">exports</span><span style="color: var(--shiki-color-text)">

193.b </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">2</span><span style="color: var(--shiki-color-text)">;</span></span>
194<span class="line"><span style="color: var(--shiki-token-constant)">exports</span><span style="color: var(--shiki-color-text)">.c </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> c;</span></span></code></pre>`),o(M);var S=a(M,6),Ns=s(S);n(Ns,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line dim"><span style="color: var(--shiki-token-keyword)">for</span><span style="color: var(--shiki-color-text)"> (</span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">of</span><span style="color: var(--shiki-color-text)"> modules) &#123;</span></span>
195<span class="line highlight"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-token-function)">.transformModuleInterface</span><span style="color: var(--shiki-color-text)">();</span></span>
196<span class="line dim"><span style="color: var(--shiki-color-text)">  moduleMap </span><span style="color: var(--shiki-token-keyword)">+=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#96;&quot;</span><span style="color: var(--shiki-token-keyword)">$&#123;</span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-color-text)">.filePath</span><span style="color: var(--shiki-token-keyword)">&#125;</span><span style="color: var(--shiki-token-string-expression)">&quot;: function(exports, require) &#123; </span><span style="color: var(--shiki-token-keyword)">$&#123;</span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-color-text)">.content</span><span style="color: var(--shiki-token-keyword)">&#125;</span><span style="color: var(--shiki-token-string-expression)"> &#125;,&#96;</span><span style="color: var(--shiki-color-text)">;</span></span>
197<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span>
198<span class="line dim"><span style="color: var(--shiki-token-comment)">// ...</span></span>
199<span class="line dim"><span style="color: var(--shiki-token-keyword)">class</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">Module</span><span style="color: var(--shiki-color-text)"> &#123;</span></span>
200<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-comment)">// ...</span></span>
201<span class="line highlight"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-function)">transformModuleInterface</span><span style="color: var(--shiki-color-text)">() &#123;</span></span>
202<span class="line highlight"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> &#123; </span><span style="color: var(--shiki-token-constant)">ast</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">code</span><span style="color: var(--shiki-color-text)"> &#125; </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">babel</span><span style="color: var(--shiki-token-function)">.transformFromAstSync</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.ast</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.content</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> &#123; </span><span style="color: var(--shiki-token-keyword)">...</span><span style="color: var(--shiki-color-text)"> &#125;);</span></span>
203<span class="line highlight"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.ast </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> ast;</span></span>
204<span class="line highlight"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">.content </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> code;</span></span>
205<span class="line highlight"><span style="color: var(--shiki-color-text)">  &#125;</span></span>
206<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(S);var K=a(S,6),Ts=s(K);n(Ts,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-color-text)">&#123;</span></span>
207<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&quot;index.js&quot;</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
208<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> &#123; default: </span><span style="color: var(--shiki-token-constant)">squareArea</span><span style="color: var(--shiki-color-text)"> &#125; </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;square.js&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
209<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> &#123; default: </span><span style="color: var(--shiki-token-constant)">circleArea</span><span style="color: var(--shiki-color-text)"> &#125; </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;circle.js&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
210<span class="line"></span>
211<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of square: &#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">squareArea</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span>
212<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of circle&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">circleArea</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span>
213<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
214<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&quot;square.js&quot;</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
215<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">area</span><span style="color: var(--shiki-color-text)">(side) &#123;</span></span>
216<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> side </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> side;</span></span>
217<span class="line"><span style="color: var(--shiki-color-text)">    &#125;</span></span>
218<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">exports</span><span style="color: var(--shiki-color-text)">.default </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> area;</span></span>
219<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
220<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&quot;circle.js&quot;</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
221<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">3.141</span><span style="color: var(--shiki-color-text)">;</span></span>
222<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">area</span><span style="color: var(--shiki-color-text)">(radius) &#123;</span></span>
223<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)">

223 radius </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> radius;</span></span>
224<span class="line"><span style="color: var(--shiki-color-text)">    &#125;</span></span>
225<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">exports</span><span style="color: var(--shiki-color-text)">.default </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> area;</span></span>
226<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
227<span class="line"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(K),e(2),o(j);var N=a(j,2),T=a(s(N),6),Cs=s(T);n(Cs,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line dim"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">bundle</span><span style="color: var(--shiki-color-text)">(graph) &#123;</span></span>
228<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">modules</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">collectModules</span><span style="color: var(--shiki-color-text)">(graph);</span></span>
229<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">moduleMap</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">toModuleMap</span><span style="color: var(--shiki-color-text)">(modules);</span></span>
230<span class="line highlight"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">moduleCode</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">addRuntime</span><span style="color: var(--shiki-color-text)">(moduleMap</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> modules[</span><span style="color: var(--shiki-token-constant)">0</span><span style="color: var(--shiki-color-text)">].filePath);</span></span>
231<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> [];</span></span>
232<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span>
233<span class="line dim"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">addRuntime</span><span style="color: var(--shiki-color-text)">(moduleMap</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> entryPoint) &#123;</span></span>
234<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">trim</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#96;</span></span>
235<span class="line dim"><span style="color: var(--shiki-token-string-expression)">    const modules = </span><span style="color: var(--shiki-token-keyword)">$&#123;</span><span style="color: var(--shiki-color-text)">moduleMap</span><span style="color: var(--shiki-token-keyword)">&#125;</span><span style="color: var(--shiki-token-string-expression)">;</span></span>
236<span class="line dim"><span style="color: var(--shiki-token-string-expression)">    const entry = &quot;</span><span style="color: var(--shiki-token-keyword)">$&#123;</span><span style="color: var(--shiki-color-text)">entryPoint</span><span style="color: var(--shiki-token-keyword)">&#125;</span><span style="color: var(--shiki-token-string-expression)">&quot;;</span></span>
237<span class="line dim"><span style="color: var(--shiki-token-string-expression)">    function webpackStart(&#123; modules, entry &#125;) &#123;</span></span>
238<span class="line dim"><span style="color: var(--shiki-token-string-expression)">

238      const moduleCache = &#123;&#125;;</span></span>
239<span class="line dim"><span style="color: var(--shiki-token-string-expression)">      const require = moduleName =&gt; &#123;</span></span>
240<span class="line dim"><span style="color: var(--shiki-token-string-expression)">        // if in cache, return the cached version</span></span>
241<span class="line dim"><span style="color: var(--shiki-token-string-expression)">        if (moduleCache[moduleName]) &#123;</span></span>
242<span class="line dim"><span style="color: var(--shiki-token-string-expression)">          return moduleCache[moduleName];</span></span>
243<span class="line dim"><span style="color: var(--shiki-token-string-expression)">        &#125;</span></span>
244<span class="line dim"><span style="color: var(--shiki-token-string-expression)">        const exports = &#123;&#125;;</span></span>
245<span class="line dim"><span style="color: var(--shiki-token-string-expression)">        // this will prevent infinite &quot;require&quot; loop</span></span>
246<span class="line dim"><span style="color: var(--shiki-token-string-expression)">        // from circular dependencies</span></span>
247<span class="line dim"><span style="color: var(--shiki-token-string-expression)">        moduleCache[moduleName] = exports;</span></span>
248<span class="line dim"><span style="color: var(--shiki-token-string-expression)">    </span></span>
249<span class="line dim"><span style="color: var(--shiki-token-string-expression)">        // &quot;require&quot;-ing the module,</span></span>
250<span class="line dim"><span style="color: var(--shiki-token-string-expression)">        // exported stuff will assigned to &quot;exports&quot;</span></span>
251<span class="line dim"><span style="color: var(--shiki-token-string-expression)">        modules[moduleName](exports, require);</span></span>
252<span class="line dim"><span style="color: var(--shiki-token-string-expression)">        return moduleCache[moduleName];</span></span>
253<span class="line dim"><span style="color: var(--shiki-token-string-expression)">      &#125;;</span></span>
254<span class="line dim"><span style="color: var(--shiki-token-string-expression)">    </span></span>
255<span class="line dim"><span style="color: var(--shiki-token-string-expression)">      // start the program</span></span>
256<span class="line dim"><span style="color: var(--shiki-token-string-expression)">      require(entry);</span></span>
257<span class="line dim"><span style="color: var(--shiki-token-string-expression)">    &#125;</span></span>
258<span class="line dim"></span>
259<span class="line dim"><span style="color: var(--shiki-token-string-expression)">    webpackStart(&#123; modules, entry &#125;);&#96;</span><span style="color: var(--shiki-color-text)">);</span></span>
260<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span>
261<span class="line dim"></span>
262<span class="line dim"><span style="color: var(--shiki-token-comment)">// trim away spaces before the line</span></span>
263<span class="line dim"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">trim</span><span style="color: var(--shiki-color-text)">(str) &#123;</span></span>
264<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">lines</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">str</span><span style="color: var(--shiki-token-function)">.split</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;&#92;n&#39;</span><span style="color: var(--shiki-color-text)">)</span><span style="color: var(--shiki-token-function)">.filter</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">Boolean</span><span style="color: var(--shiki-color-text)">);</span></span>
265<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">padLength</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> lines[</span><span style="color: var(--shiki-token-constant)">0</span><span style="color: var(--shiki-color-text)">].</span><span style="color: var(--shiki-token-constant)">length</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">-</span><span style="color: var(--shiki-color-text)"> lines[</span><span style="color: var(--shiki-token-constant)">0</span><span style="color: var(--shiki-color-text)">]</span><span style="color: var(--shiki-token-function)">.trimLeft</span><span style="color: var(--shiki-color-text)">().</span><span style="color: var(--shiki-token-constant)">length</span><span style="color: var(--shiki-color-text)">;</span></span>
266<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">regex</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">new</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">RegExp</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#96;^\\s&#123;</span><span style="color: var(--shiki-token-keyword)">$&#123;</span><span style="color: var(--shiki-color-text)">padLength</span><span style="color: var(--shiki-token-keyword)">&#125;</span><span style="color: var(--shiki-token-string-expression)">&#125;&#96;</span><span style="color: var(--shiki-color-text)">);</span></span>
267<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">lines</span><span style="color: var(--shiki-token-function)">.map</span><span style="color: var(--shiki-color-text)">(line </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">line</span><span style="color: var(--shiki-token-function)">.replace</span><span style="color: var(--shiki-color-text)">(regex</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;&#39;</span><span style="color: var(--shiki-color-text)">))</span><span style="color: var(--shiki-token-function)">.join</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;&#92;n&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
268<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(T);var C=a(T,6),Ls=s(C);n(Ls,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line dim"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">bundle</span><span style="color: var(--shiki-color-text)">(graph) &#123;</span></span>
269<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">modules</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">collectModules</span><span style="color: var(--shiki-color-text)">(graph);</span></span>
270<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">moduleMap</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">toModuleMap</span><span style="color: var(--shiki-color-text)">(modules);</span></span>
271<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">

271moduleCode</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">addRuntime</span><span style="color: var(--shiki-color-text)">(moduleMap</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> modules[</span><span style="color: var(--shiki-token-constant)">0</span><span style="color: var(--shiki-color-text)">].filePath);</span></span>
272<span class="line highlight"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> [&#123; name</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;bundle.js&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> content</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> moduleCode &#125;];</span></span>
273<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(C);var Q=a(C,4),Rs=s(Q);n(Rs,()=>`<pre class="prism language-"><code><span class="line">Area of square:  25</span>
274<span class="line">Area of circle 78.525</span></code></pre>`),o(Q),e(4),o(N);var L=a(N,2),R=a(s(L),6),Ds=s(R);n(Ds,()=>`<div class="filename">index.js</div><pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line dim"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> squareArea </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;./square.js&#39;</span><span style="color: var(--shiki-color-text)">;</span></span>
275<span class="line dim"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> circleArea </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;./circle.js&#39;</span><span style="color: var(--shiki-color-text)">;</span></span>
276<span class="line dim"></span>
277<span class="line highlight"><span style="color: var(--shiki-token-keyword)">export</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">3.141</span><span style="color: var(--shiki-color-text)">;</span></span>
278<span class="line dim"></span>
279<span class="line dim"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of square: &#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">squareArea</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span>
280<span class="line dim"><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of circle&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">circleArea</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span></code></pre>`),o(R);var D=a(R,2),Fs=s(D);n(Fs,()=>`<div class="filename">circle.js</div><pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line highlight"><span style="color: var(--shiki-token-comment)">// const PI = 3.141;</span></span>
281<span class="line highlight"><span style="color: var(--shiki-token-keyword)">

281import</span><span style="color: var(--shiki-color-text)"> &#123; PI &#125; </span><span style="color: var(--shiki-token-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">&#39;./index.js&#39;</span><span style="color: var(--shiki-color-text)">;</span></span>
282<span class="line dim"></span>
283<span class="line dim"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">area</span><span style="color: var(--shiki-color-text)">(radius) &#123;</span></span>
284<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> radius </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> radius;

284</span></span>
285<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span>
286<span class="line dim"><span style="color: var(--shiki-token-keyword)">export</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">default</span><span style="color: var(--shiki-color-text)"> area;</span></span></code></pre>`),o(D);var ss=a(D,4),Gs=s(ss);n(Gs,()=>'<pre class="prism language-"><code><span class="line">RangeError: Maximum call stack size exceeded</span></code></pre>'),o(ss),o(L);var os=a(L,2),F=a(s(os),6),Js=s(F);n(Js,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line dim"><span style="color: var(--shiki-token-comment)">// fixing circular dependencies when generating module graph</span></span>
287<span class="line highlight"><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">MODULE_CACHE</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">new</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">Map</span><span style="color: var(--shiki-color-text)">();</span></span>
288<span class="line dim"></span>
289<span class="line dim"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">createModule</span><span style="color: var(--shiki-color-text)">(filePath) &#123;</span></span>
290<span class="line highlight"><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">if</span><span style="color: var(--shiki-color-text)"> (</span><span style="color: var(--shiki-token-keyword)">!</span><span style="color: var(--shiki-token-constant)">MODULE_CACHE</span><span style="color: var(--shiki-token-function)">.has</span><span style="color: var(--shiki-color-text)">(filePath)) &#123;</span></span>
291<span class="line dim"><span style="color: var(--shiki-color-text)">   </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">new</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">Module</span><span style="color: var(--shiki-color-text)">(filePath);</span></span>
292<span class="line highlight"><span style="color: var(--shiki-color-text)">   </span><span style="color: var(--shiki-token-constant)">MODULE_CACHE</span><span style="color: var(--shiki-token-function)">.set</span><span style="color: var(--shiki-color-text)">(filePath</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-color-text)">);</span></span>
293<span class="line highlight"><span style="color: var(--shiki-color-text)">   </span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-token-function)">.initDependencies</span><span style="color: var(--shiki-color-text)">();</span></span>
294<span class="line dim"><span style="color: var(--shiki-color-text)"> &#125;</span></span>
295<span class="line highlight"><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">MODULE_CACHE</span><span style="color: var(--shiki-token-function)">.get</span><span style="color: var(--shiki-color-text)">(filePath);</span></span>
296<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span>
297<span class="line dim"></span>
298<span class="line dim"><span style="color: var(--shiki-token-keyword)">class</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">Module</span><span style="color: var(--shiki-color-text)"> &#123;</span></span>
299<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">...</span></span>
300<span class="line highlight"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-function)">initDependencies</span><span style="color: var(--shiki-color-text)">() &#123;</span></span>
301<span class="line highlight"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-color-text)">

301.dependencies </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">this</span><span style="color: var(--shiki-token-function)">.findDependencies</span><span style="color: var(--shiki-color-text)">();</span></span>
302<span class="line highlight"><span style="color: var(--shiki-color-text)">  &#125;</span></span>
303<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span>
304<span class="line dim"></span>
305<span class="line dim"><span style="color: var(--shiki-token-comment)">// fixing circular dependencies when traversing module graph</span></span>
306<span class="line dim"><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">collectModules</span><span style="color: var(--shiki-color-text)">(graph) &#123;</span></span>
307<span class="line highlight"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">modules</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">new</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">Set</span><span style="color: var(--shiki-color-text)">();</span></span>
308<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-function)">collect</span><span style="color: var(--shiki-color-text)">(graph</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> modules);</span></span>
309<span class="line highlight"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">Array</span><span style="color: var(--shiki-token-function)">.from</span><span style="color: var(--shiki-color-text)">(modules);</span></span>
310<span class="line dim"></span>
311<span class="line dim"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">collect</span><span style="color: var(--shiki-color-text)">(module</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> modules) &#123;</span></span>
312<span class="line dim"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">if</span><span style="color: var(--shiki-color-text)"> (</span><span style="color: var(--shiki-token-keyword)">!</span><span style="color: var(--shiki-token-constant)">modules</span><span style="color: var(--shiki-token-function)">.has</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-color-text)">)) &#123;</span></span>
313<span class="line dim"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-constant)">modules</span><span style="color: var(--shiki-token-function)">.add</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-color-text)">);</span></span>
314<span class="line dim"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-constant)">module</span><span style="color: var(--shiki-token-function)">.</span><span style="color: var(--shiki-token-constant)">dependencies</span><span style="color: var(--shiki-token-function)">.forEach</span><span style="color: var(--shiki-color-text)">(dependency </span><span style="color: var(--shiki-token-keyword)">=&gt;</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">collect</span><span style="color: var(--shiki-color-text)">(dependency</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> modules));

314</span></span>
315<span class="line dim"><span style="color: var(--shiki-color-text)">    &#125;</span></span>
316<span class="line dim"><span style="color: var(--shiki-color-text)">  &#125;</span></span>
317<span class="line dim"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(F);var G=a(F,4),Bs=s(G);n(Bs,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-color-text)">$ node output/bundle.js</span></span>
318<span class="line"><span style="color: var(--shiki-color-text)">Area of square:  25</span></span>
319<span class="line"><span style="color: var(--shiki-color-text)">Area of circle NaN</span></span></code></pre>`),o(G);var J=a(G,4),Os=s(J);n(Os,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-color-text)">&#123;</span></span>
320<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&#39;index.js&#39;</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
321<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> &#123; default: </span><span style="color: var(--shiki-token-constant)">squareArea</span><span style="color: var(--shiki-color-text)"> &#125; </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;square.js&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
322<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-comment)">// 1. require circle.js</span></span>
323<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> &#123; default: </span><span style="color: var(--shiki-token-constant)">circleArea</span><span style="color: var(--shiki-color-text)"> &#125; </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;circle.js&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
324<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-comment)">// 3. define PI on exports</span></span>
325<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">exports</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">3.141</span><span style="color: var(--shiki-color-text)">;</span></span>
326<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of square: &#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">squareArea</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span>
327<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-comment)">// 4. call &#96;circleArea&#96;</span></span>
328<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of circle&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">circleArea</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span>
329<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
330<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&#39;circle.js&#39;</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
331<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-comment)">// 2. at the point of executing this, PI is not yet defined</span></span>
332<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> &#123; PI: </span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> &#125; </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;index.js&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
333<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">area</span><span style="color: var(--shiki-color-text)">(radius) &#123;</span></span>
334<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-comment)">// 5. PI is undefined</span></span>
335<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)">

335 radius </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> radius;</span></span>
336<span class="line"><span style="color: var(--shiki-color-text)">    &#125;</span></span>
337<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">exports</span><span style="color: var(--shiki-color-text)">.default </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> area;</span></span>
338<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
339<span class="line"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(J);var as=a(J,6),Ws=s(as);n(Ws,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-color-text)">&#123;</span></span>
340<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&#39;index.js&#39;</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
341<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">square_import</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;square.js&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
342<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-comment)">// 1. require circle.js</span></span>
343<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">circle_import</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;circle.js&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
344<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-comment)">// 3. define PI on exports</span></span>
345<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">exports</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-constant)">PI</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">3.141</span><span style="color: var(--shiki-color-text)">;</span></span>
346<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of square: &#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> square_import[</span><span style="color: var(--shiki-token-string-expression)">&#39;default&#39;</span><span style="color: var(--shiki-color-text)">](</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span>
347<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-comment)">// 4. call &#96;circleArea&#96;</span></span>
348<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">console</span><span style="color: var(--shiki-token-function)">.log</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;Area of circle&#39;</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> circle_import[</span><span style="color: var(--shiki-token-string-expression)">&#39;default&#39;</span><span style="color: var(--shiki-color-text)">](</span><span style="color: var(--shiki-token-constant)">5</span><span style="color: var(--shiki-color-text)">));</span></span>
349<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
350<span class="line"><span style="color: var(--shiki-color-text)">  </span><span style="color: var(--shiki-token-string-expression)">&#39;circle.js&#39;</span><span style="color: var(--shiki-color-text)">: </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)">(exports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> require) &#123;</span></span>
351<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-comment)">// 2. we keep a reference of the &#96;index.js&#96;&#39;s &#96;exports&#96; object</span></span>
352<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">const</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">

352index_import</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">require</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">&#39;index.js&#39;</span><span style="color: var(--shiki-color-text)">);</span></span>
353<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-keyword)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">area</span><span style="color: var(--shiki-color-text)">(radius) &#123;</span></span>
354<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-comment)">// 5. we get PI from the &#96;exports&#96;</span></span>
355<span class="line"><span style="color: var(--shiki-color-text)">      </span><span style="color: var(--shiki-token-keyword)">return</span><span style="color: var(--shiki-color-text)"> index_import[</span><span style="color: var(--shiki-token-string-expression)">&#39;PI&#39;</span><span style="color: var(--shiki-color-text)">] </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> radius </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> radius;

355</span></span>
356<span class="line"><span style="color: var(--shiki-color-text)">    &#125;</span></span>
357<span class="line"><span style="color: var(--shiki-color-text)">    </span><span style="color: var(--shiki-token-constant)">exports</span><span style="color: var(--shiki-color-text)">.default </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> area;</span></span>
358<span class="line"><span style="color: var(--shiki-color-text)">  &#125;</span><span style="color: var(--shiki-token-punctuation)">,</span></span>
359<span class="line"><span style="color: var(--shiki-color-text)">&#125;</span></span></code></pre>`),o(as),e(4),o(os),e(6),zs(()=>{B(E,"srcset",`${oo}, ${ao} 2x`),B(Z,"src",ns),B(Z,"srcset",`${ns}, ${so} 2x`)}),Hs(rs,W)},$$slots:{default:!0}})),Vs()}export{bo as component};