1import"../chunks/Bzak7iHL.js";import"../chunks/kfVmCPsV.js";import{p as us,g as xs,d as ms,b as ws,s as a,f as fs,e as s,t as gs,a as bs,r as o,n as t}from"../chunks/C2PHntuy.js";import{h as n}from"../chunks/C3QlhiH-.js";import{s as e}from"../chunks/CEusTUg_.js";import{i as _s}from"../chunks/BQOOHHT8.js";import{l as js,s as As}from"../chunks/gzNpScmH.js";import{B as $s}from"../chunks/B1caYEk9.js";import{t as Bs}from"../chunks/C3bQ3Oc7.js";const V=""+new URL("../assets/why-bundling.gKebxlNO.png",import.meta.url).href,Ts=""+new URL("../assets/why-bundling.BJso3br0.png",import.meta.url).href,qs=""+new URL("../assets/why-bundling.Bf0U_d8o.webp",import.meta.url).href,Ss=""+new URL("../assets/why-bundling.BDZ8akaG.webp",import.meta.url).href,Z=""+new URL("../assets/relationship.BohYqPAA.png",import.meta.url).href,Is=""+new URL("../assets/relationship.hKyKRAVh.png",import.meta.url).href,Rs=""+new URL("../assets/relationship.D3lk_aht.webp",import.meta.url).href,Us=""+new URL("../assets/relationship.wXLAHMWM.webp",import.meta.url).href,Q=""+new URL("../assets/ast-explorer.qmNE8Vnh.jpeg",import.meta.url).href,Ls=""+new URL("../assets/ast-explorer.f6qToDOS.jpeg",import.meta.url).href,Ms=""+new URL("../assets/ast-explorer.CYBWdHS3.webp",import.meta.url).href,Ws=""+new URL("../assets/ast-explorer.BFAU-TGk.webp",import.meta.url).href,Y=""+new URL("../assets/resolution.BIkjKanZ.png",import.meta.url).href,Ps=""+new URL("../assets/resolution.4v8RMFtE.png",import.meta.url).href,Cs=""+new URL("../assets/resolution.BwlfA0ew.webp",import.meta.url).href,Os=""+new URL("../assets/resolution.BxUgmB4P.webp",import.meta.url).href,X={title:"Building a simplified webpack clone",date:"2020-10-02T08:00:00Z",tags:["JavaScript","webpack"],label:"blog",description:'Backgroun
1dWe are trying out a new form of our weekly sharing, which is interest group-based.I am hosting the "Building a simplified webpack clone" interest group, which lasted 8 weeks, and every week, we will cover 1 concept of webpack and an assignment to implement that concept ourselves....',tableOfContents:[{link:"background",title:"Background"},{link:"prior-art",title:"Prior Art"},{link:"week-1-resolving",title:"Week 1 - Resolving",nested:[{link:"why-module-bundler",title:"Why module bundler?"},{link:"1-we-start-from-an-entry-file",title:"1. We start from an entry file."},{link:"2-we-read-the-file-and-determine-what-is-being-imported-into-this-file",title:"2. We read the file and determine what is being imported into this file"},{link:"3-now-knowing-what-are-the-names-you-are-importing-from-you-need-to-figure-out-their-actual-file-path",title:"3. Now knowing what are the names you are importing from, you need to figure out their actual file path"},{link:"4-after-you-figured-the-file-path-you-re-importing-from-for-each-of-the-file-repeat-step-2-until-no-more-new-files-to-be-found",title:"4ï¸â£ After you figured the file path you're importing from, for each of the file, ð repeat step 2ï¸â£ until no more new files to be found."},{link:"assignment",title:"Assignment"}]},{link:"week-2-bundling",title:"Week 2 - Bundling",nested:[{link:"observation-bundle-using-webpack",title:"ð Observation: Bundle using webpack",nested:[{link:"observation-bundle-using-rollup",title:"ð Observation: Bundle using rollup"}]},{link:"output-target-of-bundling",title:"ð¤ Output target of bundling"},{link:"assignment-1",title:"Assignment"},{link:"manipulating-ast",title:"ð¨ Manipulating AST"}]}]},{title:Qs,date:Ys,tags:Xs,label:so,description:oo,tableOfContents:ao}=X;var Ds=ws(`<section><h2><a href="#background" id="background">Background</a></h2> <p>We are trying out a new form of our weekly sharing, which is interest group-based.</p> <p>I am hosting the <strong>"Building a simplified webpack clone"</strong> interest group, which lasted 8 weeks, and every week, we will cover 1 concept of webpack and an assignment to implement that concept ourselves.</p></section> <section><h2><a href="#prior-art" id="prior-art">Prior Art</a></h2> <ul><li>ðº <a href="https://twitter.com/wSokra" rel="nofollow">Tobias Koppers</a> - bundling live by hand - <a href="https://youtube.com/watch?v=UNMkLHzofQI" rel="nofollow">https://youtube.com/watch?v=UNMkLHzofQI</a></li> <li>ðº <a href="https://twitter.com/ronenamiel" rel="nofollow">Ronen Amiel</a> - build your own webpack - <a href="https://youtube.com/watch?v=Gc9-7PBqOC8" rel="nofollow">https://youtube.com/watch?v=Gc9-7PBqOC8</a></li> <li>ð adam kelly - <a href="https://freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/" rel="nofollow">https://freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/</a></li></ul></section> <section><h2><a href="#week-1-resolving" id="week-1-resolving">Week 1 - Resolving</a></h2></section> <section><h3><a href="#why-module-bundler" id="why-module-bundler">Why module bundler?</a></h3> <p>We love writing small modular JS files, but that shouldn't impact the users.</p> <p>Traditionally with limit on number of request connection, ð slow internet speed, we want to combine all the code into 1 file -> 1 network request</p> <p><span style="display: block; position: relative; padding-top: 35.100%; width: 100%;"><picture><source type="image/webp"/><img loading="lazy" style="position: absolute; top: 0; width: 100%; height: 100%" alt="why bundling"/></picture></span></p> <p>ð° Traditionally, we concatenate the source files into 1 big output file.</p> <p>But that begs the question</p> <ul><li>â what should be the order of concatenation (files may depend on each other) ?</li> <li>â what if there's var naming conflict across files?</li> <li>â what if there's unused file?</li></ul> <p>ð¡ That's why we need a module system to define the relationship among the JS modules</p> <p><span style="display: block; position: relative; padding-top: 90.868%; width: 100%;"><picture><source type="image/webp"/><img loading="lazy" style="position: absolute; top: 0; width: 100%; height: 100%" alt="relationship within a bundle"/></picture></span></p> <p>
1So now, let's take a look how we can start building a module dependency graph</p></section> <section><h3><a href="#1-we-start-from-an-entry-file" id="1-we-start-from-an-entry-file">1. We start from an entry file.</a></h3> <p>This is the starting point of the application</p></section> <section><h3><a href="#2-we-read-the-file-and-determine-what-is-being-imported-into-this-file" id="2-we-read-the-file-and-determine-what-is-being-imported-into-this-file">2. We read the file and determine what is being imported into this file</a></h3> <div class="code-section"><!></div> <p>In the example above, the following is imported:</p> <ul><li><code class="inline">'./calculate'</code></li> <li><code class="inline">'../measurements'</code></li> <li><code class="inline">'formulas'</code></li></ul> <p>we can spot the import from our human eye ð, but how can computer ð¤ do that for us?</p> <p>ð¤ can parse the code in string into Abstract Syntax Tree (AST), something representing the code that ð¤ can understand.</p> <p>in AST, import statement is represented by a node with:</p> <ul><li><code class="inline">type</code> = "ImportDeclaration"</li> <li><code class="inline">source.value</code> = the filename it's trying to import</li></ul> <p><span style="display: block; position: relative; padding-top: 48.359%; width: 100%;"><picture><source type="image/webp"/><img loading="lazy" style="position: absolute; top: 0; width: 100%; height: 100%" alt="ast explorer"/></picture></span></p> <p>There are various JavaScript parser out there, here are some of them</p> <ul><li>ð <a href="https://babeljs.io/docs/en/babel-core" rel="nofollow">babel</a></li> <li>ð <a href="https://github.com/acornjs/acorn" rel="nofollow">acorn</a></li> <li>ð <a href="https://github.com/jquery/esprima" rel="nofollow">esprima</a></li> <li>ð <a href="https://github.com/guybedford/es-module-lexer" rel="nofollow">es-module-lexer</a></li></ul> <div class="code-section"><!></div> <p>...and if you forgot about your tree-traversal algorithm ð¨, here are some libraries that can help you out</p> <ul><li>ð <a href="https://babeljs.io/docs/en/babel-traverse" rel="nofollow">babel-traverse</a></li> <li>ð <a href="https://github.com/acornjs/acorn/tree/master/acorn-walk" rel="nofollow">acorn-walk</a></li> <li>ð <a href="https://github.com/Rich-Harris/estree-walker" rel="nofollow">estree-walker</a></li></ul> <div class="code-section"><!></div> <p>Some other useful links</p> <ul><li>Inspect your AST <ul><li><a href="https://astexplorer.net" rel="nofollow">https://astexplorer.net</a></li> <li><a href="https://lihautan.com/babel-ast-explorer/" rel="nofollow">https://lihautan.com/babel-ast-explorer/</a></li></ul></li> <li>The JS AST Specification <ul><li><a href="https://github.com/estree/estree" rel="nofollow">https://github.com/estree/estree</a></li></ul></li> <li>Guide on parsing, traversing AST <ul><li><a href="https://lihautan.com/manipulating-ast-with-javascript" rel="nofollow">https://lihautan.com/manipulating-ast-with-javascript</a></li> <li><a href="https://lihautan.com/json-parser-with-javascript" rel="nofollow">https://lihautan.com/json-parser-with-javascript</a></li></ul></li></ul></section> <section><h3><a href="#3-now-knowing-what-are-the-names-you-are-importing-from-you-need-to-figure-out-their-actual-file-path" id="3-now-knowing-what-are-the-names-you-are-importing-from-you-need-to-figure-out-their-actual-file-path">3. Now knowing what are the names you are importing from, you need to figure out their actual file path</a></h3> <p>that depends on</p> <ul><li>the current file path</li> <li>the name you are importing from</li></ul> <div class="code-section"><!></div> <p>That leads us to the <a href="https://nodejs.org/api/modules.html#modules_all_together" rel="nofollow">Node.js Module Resolution Algorithm</a></p> <p>It describes the steps taken to resolve the file.</p> <p>there are 3 scenarios in general:</p> <ul><li>load as file</li> <li>load as directory</li> <li>load as node_modules</li></ul> <p><span style="display: block; position: relative; padding-top: 38.000%; width: 100%;"><picture><source type="image/webp"/><img loading="lazy" style="position: absolute; top: 0; width: 100%; height: 100%" alt="node js module resolution algorithm"/></picture></span></p> <p>Some other module resolution:</p> <ul><li>webpack uses <a href="https://github.com/webpack/enhanced-resolve" rel="nofollow"><code class="inline">enhanced-resolve</code></a> which is a highly configurable resolver</li> <li>Typescript implements its own resolver, <a href="https://typescriptlang.org/docs/handbook/module-resolution.html" rel="nofollow">see how TS resolving works</a></li></ul></section> <section><h3><a href="#4-after-you-figured-the-file-path-you-re-importing-from-for-each-of-the-file-repeat-step-2-until-no-more-new-files-to-be-found" id="4-after-you-figured-the-file-path-you-re-importing-from-for-each-of-the-file-repeat-step-2-until-no-more-new-files-to-be-found">4ï¸â£ After you figured the file path you're importing from, for each of the file, ð repeat step 2ï¸â£ until no more new files to be found.</a></h3></section> <section><h3><a href="#assignment" id="assignment">Assignment</a></h3> <p><a href="https://github.com/tanhauhau/rk-webpack-clone" rel="nofollow">Test cases</a></p> <p>For each test cases, we provide the entry file, and we expect</p> <p>ð Module</p> <ul><li><code class="inline">filepath</code></li> <li><code class="inline">dependencies</code> -> list of Depedencies (see below ð)</li> <li><code class="inline">isEntryFile</code> -> <code class="inline">true</code> if it is the entry file / <code class="inline">false</code> otherwise</li></ul> <p>
1ð Depedencies</p> <ul><li><code class="inline">module</code> (see above âï¸)</li> <li><code class="inline">exports</code> -> list of var names you are importing, eg "default", "measure" ..</li></ul> <p>ð If 2 module are importing the same module, both should be referring to the same module instance</p> <div class="code-section"><!></div> <p>ð Be careful with circular dependency ð</p></section> <section><h2><a href="#week-2-bundling" id="week-2-bundling">Week 2 - Bundling</a></h2> <p>ð¤ How do you bundle modules into 1 file?</p> <p>After studying the 2 most popular bundlers, webpack and rollup, i found that the way they bundle are very different.</p> <p>Both of them come a long way, I believe both has its own pros and cons</p> <div class="code-section"><!></div></section> <section><h3><a href="#observation-bundle-using-webpack" id="observation-bundle-using-webpack">ð Observation: Bundle using webpack</a></h3> <ul><li>ð each module wrap in a function</li> <li>ð a module map, module identifier as key</li> <li>ð a runtime glue code to piece modules together</li> <li>ð calling module function, with 2 parameters, 1 to assign the exports of the module, 1 to "require" other modules</li></ul> <div class="code-section"><!></div></section> <section><h4><a href="#observation-bundle-using-rollup" id="observation-bundle-using-rollup">ð Observation: Bundle using rollup</a></h4> <ul><li>ð much flatter bundle</li> <li>ð module are concatenated in topological order</li> <li>ð exports and imports are removed by renaming them to the same variable name</li> <li>ð any variable in module scope that may have naming conflict with other variables are renamed</li></ul> <div class="code-section"><!></div></section> <section><h3><a href="#output-target-of-bundling" id="output-target-of-bundling">ð¤ Output target of bundling</a></h3> <ul><li><p>IIFE (the most common target, we want to execute the script)</p></li> <li><p>CJS, ESM, UMD, AMD, ... (we want to bundle a library, exports of entry file is exported in selected module format)</p></li> <li><p>ð <a href="https://webpack.js.org/configuration/output/#outputlibrarytarget" rel="nofollow">https://webpack.js.org/configuration/output/#outputlibrarytarget</a></p></li> <li><p>ð <a href="https://rollupjs.org/guide/en/#configuration-files" rel="nofollow">https://rollupjs.org/guide/en/#configuration-files</a></p></li></ul></section> <section><h3><a href="#assignment-1" id="assignment-1">Assignment</a></h3> <p><a href="https://github.com/tanhauhau/rk-webpack-clone" rel="nofollow">Test cases</a></p> <p>Here are some of the the interesting test cases:</p> <p>𧪠Able to handle re-export nicely</p> <div class="code-section"><!></div> <p>𧪠Importing the same file twice, but are you able to make sure it's gonna be evaluated only once?</p> <div class="code-section"><!></div> <p>𧪠The dreaded circular dependency, are you able to make sure to get the value of <code class="inline">a</code>, <code class="inline">b</code>, <code class="inline">c</code> in all the files?</p> <div class="code-section"><!></div> <p>𧪠Are you able to export a variable before it is declared? Does the order matter?</p> <div class="code-section"><!></div> <p>𧪠imported variables is not a normal variable, it's a live binding of the exported variable. Are you able to make sure that the value of <code class="inline">count</code> is always up to date?</p> <div class="code-section"><!></div> <p>ð Be careful with circular dependency ð</p></section> <section><h3><a href="#manipulating-ast" id="manipulating-ast">ð¨ Manipulating AST</a></h3> <p>ð <a href="/manipulating-ast-with-javascript/">manipulating ast with javascript</a> (generic) 2ð <a href="https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md" rel="nofollow">babel plugin handbook</a> (babel)</p></section>`,1);function no(ss,b){const os=js(b,["children","$$slots","$$events","$$legacy"]);us(b,!1),xs("blog",{image:Bs}),_s(),$s(ss,As(()=>os,()=>X,{children:(as,Ns)=>{var _=Ds(),r=a(fs(_),6),l=a(s(r),6),j=s(l),A=s(j),$=s(A),B=a($);o(A),o(j),o(l);var T=a(l,10),q=s(T),S=s(q),I=s(S),R=a(I);o(S),o(q),o(T),t(2),o(r);var i=a(r,4),p=a(s(i),2),ns=s(p);n(ns,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-keyword)">
2import</span><span style="color: var(--shiki-color-text)"> calculate </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)">'./calculate'</span><span style="color: var(--shiki-color-text)">;</span></span> 3<span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> { measure</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> UNITS } </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)">'../measurements'</span><span style="color: var(--shiki-color-text)">;</span></span> 4<span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> formula </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)">'formulas'</span><span style="color: var(--shiki-color-text)">;</span></span> 5<span class="line"></span> 6<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)">oneCm</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)">measure</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-constant)">1</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">UNITS</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-constant)">CM</span><span style="color: var(--shiki-color-text)">);</span></span> 7<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)">result</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)">calculate</span><span style="color: var(--shiki-color-text)">(formula</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> oneCm);</span></span></code></pre>`),o(p);var c=a(p,14),U=s(c),L=s(U),M=s(L),W=a(M);o(L),o(U),o(c);var k=a(c,6),es=s(k);n(es,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-comment)">// babel</span></span> 8<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)">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)">'@babel/core'</span><span style="color: var(--shiki-color-text)">);</span></span> 9<span class="line"><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)">(code);</span></span> 10<span class="line"></span> 11<span class="line"><span style="color: var(--shiki-token-comment)">// acorn</span></span> 12<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)">acorn</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)">'acorn'</span><span style="color: var(--shiki-color-text)">);</span></span> 13<span class="line"><span style="color: var(--shiki-token-constant)">acorn</span><span style="color: var(--shiki-token-function)">.parse</span><span style="color: var(--shiki-color-text)">(code</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> { ecmaVersion</span><span style="color: var(--shiki-token-keyword)">:</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">2020</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> sourceType</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)">'module'</span><span style="color: var(--shiki-color-text)"> });</span></span> 14<span class="line"></span> 15<span class="line"><span style="color: var(--shiki-token-comment)">// esprima</span></span> 16<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)">esprima</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)">'esprima'</span><span style="color: var(--shiki-color-text)">);</span></span> 17<span class="line"><span style="color: var(--shiki-token-constant)">esprima</span><span style="color: var(--shiki-token-function)">.parseScript</span><span style="color: var(--shiki-color-text)">(code);</span></span> 18<span class="line"></span> 19<span class="line"><span style="color: var(--shiki-token-comment)">// if you just need the import & export</span></span> 20<span class="line"><span style="color: var(--shiki-token-comment)">// es-module-lexer is blazing fast, it is written in c, and loaded through web-assembly</span></span> 21<span class="line"><span style="color: var(--shiki-token-comment)">// is what powers vite for parsing dependencies</span></span> 22<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)">init</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">parse</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)">'es-module-lexer'</span><span style="color: var(--shiki-color-text)">);</span></span> 23<span class="line"><span style="color: var(--shiki-token-keyword)">await</span><span style="color: var(--shiki-color-text)"> init;</span></span> 24<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)">imports</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">exports</span><span style="color: var(--shiki-color-text)">
24] </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">parse</span><span style="color: var(--shiki-color-text)">(code);</span></span></code></pre>`),o(k);var P=a(k,6),ts=s(P);n(ts,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-comment)">// babel</span></span> 25<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)">traverse</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)">'@babel/traverse'
25</span><span style="color: var(--shiki-color-text)">).default;</span></span> 26<span class="line"><span style="color: var(--shiki-token-function)">traverse</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> 27<span class="line"><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">ImportDeclaration</span><span style="color: var(--shiki-color-text)">(node) {}</span><span style="color: var(--shiki-token-punctuation)">,</span></span> 28<span class="line"><span style="color: var(--shiki-color-text)">});</span></span> 29<span class="line"></span> 30<span class="line"><span style="color: var(--shiki-token-comment)">// acorn</span></span> 31<span class="line"><span style="color: var(--shiki-token-constant)">walk</span><span style="color: var(--shiki-token-function)">.simple</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> 32<span class="line"><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">ImportDeclaration</span><span style="color: var(--shiki-color-text)">(node) {}</span><span style="color: var(--shiki-token-punctuation)">,</span></span> 33<span class="line"><span style="color: var(--shiki-color-text)">});</span></span> 34<span class="line"></span> 35<span class="line"><span style="color: var(--shiki-token-comment)">// estree-walker</span></span> 36<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)">walk</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)">'estree-walker'</span><span style="color: var(--shiki-color-text)">);</span></span> 37<span class="line"><span style="color: var(--shiki-token-function)">walk</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> 38<span class="line"><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">enter</span><span style="color: var(--shiki-color-text)">(node) {}</span><span style="color: var(--shiki-token-punctuation)">,</span></span> 39<span class="line"><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">leave</span><span style="color: var(--shiki-color-text)">(node) {}</span><span style="color: var(--shiki-token-punctuation)">,</span></span> 40<span class="line"><span style="color: var(--shiki-color-text)">});</span></span></code></pre>`),o(P),t(4),o(i);var h=a(i,2),y=a(s(h),6),rs=s(y);n(rs,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-function)">resolve</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">'a/b/app.js'</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)">'./calculate.js'</span><span style="color: var(--shiki-color-text)">);</span></span> 41<span class="line"><span style="color: var(--shiki-token-comment)">// a/b/calculate.js</span></span> 42<span class="line"><span style="color: var(--shiki-token-function)">resolve</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">'a/b/app.js'</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)">'../measurements.js'</span><span style="color: var(--shiki-color-text)">);</span></span> 43<span class="line"><span style="color: var(--shiki-token-comment)">// a/measurements.js</span></span> 44<span class="line"><span style="color: var(--shiki-token-function)">resolve</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">'a/b/app.js'</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)">'formulas'</span><span style="color: var(--shiki-color-text)">);</span></span> 45<span class="line"><span style="color: var(--shiki-token-comment)">// node_modules/formulas/src/index.js</span></span></code></pre>`),o(y);
45var C=a(y,10),O=s(C),D=s(O),N=s(D),z=a(N);o(D),o(O),o(C),t(4),o(h);var v=a(h,4),F=a(s(v),16),ls=s(F);n(ls,()=>'<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-color-text)">moduleCFromModuleA </span><span style="color: var(--shiki-token-keyword)">===</span><span style="color: var(--shiki-color-text)"> moduleCFromModuleB;</span></span></code></pre>'),o(F),t(2),o(v);var d=a(v,2),H=a(s(d),8),is=s(H);n(is,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-comment)">// circle.js</span></span> 46<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> 47<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)"> </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) {</span></span> 48<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)"> radius </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> radius;
48</span></span> 49<span class="line"><span style="color: var(--shiki-color-text)">}</span></span> 50<span class="line"></span> 51<span class="line"><span style="color: var(--shiki-token-comment)">// square.js</span></span> 52<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)"> </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) {</span></span> 53<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> 54<span class="line"><span style="color: var(--shiki-color-text)">}</span></span> 55<span class="line"></span> 56<span class="line"><span style="color: var(--shiki-token-comment)">// app.js</span></span> 57<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)">'./square'</span><span style="color: var(--shiki-color-text)">;</span></span> 58<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)">'./circle'</span><span style="color: var(--shiki-color-text)">;</span></span> 59<span class="line"></span> 60<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)">'Area of square: '</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> 61<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)">'Area of circle'</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(H),o(d);var u=a(d,2),J=a(s(u),4),ps=s(J);n(ps,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-comment)">// webpack-bundle.js</span></span> 62<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)"> {</span></span> 63<span class="line"><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'circle.js'</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)"> __getModule) {</span></span> 64<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> 65<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) {</span></span> 66<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)">
66 radius </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> radius;</span></span> 67<span class="line"><span style="color: var(--shiki-color-text)"> }</span></span> 68<span class="line"><span style="color: var(--shiki-color-text)"> }</span><span style="color: var(--shiki-token-punctuation)">,</span></span> 69<span class="line"><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'square.js'</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)"> __getModule) {</span></span> 70<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) {</span></span> 71<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> 72<span class="line"><span style="color: var(--shiki-color-text)"> }</span></span> 73<span class="line"><span style="color: var(--shiki-color-text)"> }</span><span style="color: var(--shiki-token-punctuation)">,</span></span> 74<span class="line"><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'app.js'</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)"> __getModule) {</span></span> 75<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)">__getModule</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">'square.js'</span><span style="color: var(--shiki-color-text)">).default;</span></span> 76<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)">__getModule</span><span style="color: var(--shiki-color-text)">(</span><span style="color: var(--shiki-token-string-expression)">'circle.js'</span><span style="color: var(--shiki-color-text)">).default;</span></span> 77<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)">'Area of square: '</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> 78<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)">'Area of circle'</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> 79<span class="line"><span style="color: var(--shiki-color-text)"> }</span></span> 80<span class="line"><span style="color: var(--shiki-color-text)">}</span></span> 81<span class="line"><span style="color: var(--shiki-token-function)">webpackRuntime</span><span style="color: var(--shiki-color-text)">({</span></span> 82<span class="line"><span style="color: var(--shiki-color-text)"> modules</span><span style="color: var(--shiki-token-punctuation)">,</span></span> 83<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)">'app.js'</span></span> 84<span class="line"><span style="color: var(--shiki-color-text)">});</span></span></code></pre>`),o(J),o(u);var x=a(u,2),E=a(s(x),4),cs=s(E);n(cs,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-comment)">// rollup-bundle.js</span></span> 85<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> 86<span class="line"></span> 87<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)">circle$area</span><span style="color: var(--shiki-color-text)">(radius) {</span></span> 88<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)">
88 radius </span><span style="color: var(--shiki-token-keyword)">*</span><span style="color: var(--shiki-color-text)"> radius;</span></span> 89<span class="line"><span style="color: var(--shiki-color-text)">}</span></span> 90<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)">square$area</span><span style="color: var(--shiki-color-text)">(side) {</span></span> 91<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> 92<span class="line"><span style="color: var(--shiki-color-text)">}</span></span> 93<span class="line"></span> 94<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)">'Area of square: '</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">square$area</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> 95<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)">'Area of circle'</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">circle$area</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(E),o(x);var G=a(x,4),m=a(s(G),8),ks=s(m);n(ks,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-comment)">// a.js</span></span> 96<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-constant)">*</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">as</span><span style="color: var(--shiki-color-text)"> b </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)">'./b'</span><span style="color: var(--shiki-color-text)">;</span></span> 97<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-constant)">*</span><span style="color: var(--shiki-color-text)"> </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)">'./c'</span><span style="color: var(--shiki-color-text)">;</span></span> 98<span class="line"><span style="color: var(--shiki-token-keyword)">export</span><span style="color: var(--shiki-color-text)"> { d } </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)">'./d'</span><span style="color: var(--shiki-color-text)">;</span></span> 99<span class="line"></span> 100<span class="line"><span style="color: var(--shiki-token-comment)">// main.js</span></span> 101<span class="line"><span style="color: var(--shiki-token-keyword)">
101import</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">*</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">as</span><span style="color: var(--shiki-color-text)"> a </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)">'./a'</span><span style="color: var(--shiki-color-text)">;</span></span> 102<span class="line"></span> 103<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)">(a);</span></span></code></pre>`),o(m);var w=a(m,4),hs=s(w);n(hs,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-comment)">// a.js</span></span> 104<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)">'./c'</span><span style="color: var(--shiki-color-text)">;</span></span> 105<span class="line"></span> 106<span class="line"><span style="color: var(--shiki-token-comment)">// b.js</span></span> 107<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)">'./c'</span><span style="color: var(--shiki-color-text)">;</span></span> 108<span class="line"></span> 109<span class="line"><span style="color: var(--shiki-token-comment)">// c.js</span></span> 110<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)">'c.js'</span><span style="color: var(--shiki-color-text)">);</span></span> 111<span class="line"></span> 112<span class="line"><span style="color: var(--shiki-token-comment)">// main.js</span></span> 113<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)">'./a'</span><span style="color: var(--shiki-color-text)">;</span></span> 114<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)">'./b'</span><span style="color: var(--shiki-color-text)">;</span></span></code></pre>`),o(w);var f=a(w,4),ys=s(f);n(ys,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-comment)">// a.js</span></span> 115<span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> { b } </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)">'./b'</span><span style="color: var(--shiki-color-text)">;</span></span> 116<span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> { c } </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)">'./c'</span><span style="color: var(--shiki-color-text)">;</span></span> 117<span class="line"></span> 118<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)">a</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-string-expression)">'a'</span><span style="color: var(--shiki-color-text)">;</span></span> 119<span class="line"></span> 120<span class="line"><span style="color: var(--shiki-token-function)">setTimeout</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> 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)">`a.js | b=</span><span style="color: var(--shiki-token-keyword)">${</span><span style="color: var(--shiki-color-text)">b</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)"> | c=</span><span style="color: var(--shiki-token-keyword)">${</span><span style="color: var(--shiki-color-text)">c</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)">`</span><span style="color: var(--shiki-color-text)">);</span></span> 122<span class="line"><span style="color: var(--shiki-color-text)">});</span></span> 123<span class="line"></span> 124<span class="line"><span style="color: var(--shiki-token-comment)">// b.js</span></span> 125<span class="line"><span style="color: var(--shiki-token-keyword)">
125import</span><span style="color: var(--shiki-color-text)"> { a } </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)">'./a'</span><span style="color: var(--shiki-color-text)">;</span></span> 126<span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> { c } </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)">'./c'</span><span style="color: var(--shiki-color-text)">;</span></span> 127<span class="line"></span> 128<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-string-expression)">'b'</span><span style="color: var(--shiki-color-text)">;</span></span> 129<span class="line"></span> 130<span class="line"><span style="color: var(--shiki-token-function)">setTimeout</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> 131<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)">`b.js | a=</span><span style="color: var(--shiki-token-keyword)">${</span><span style="color: var(--shiki-color-text)">a</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)"> | c=</span><span style="color: var(--shiki-token-keyword)">${</span><span style="color: var(--shiki-color-text)">c</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)">`</span><span style="color: var(--shiki-color-text)">);</span></span> 132<span class="line"><span style="color: var(--shiki-color-text)">});</span></span> 133<span class="line"></span> 134<span class="line"><span style="color: var(--shiki-token-comment)">// c.js</span></span> 135<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-keyword)">from</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-string-expression)">'./a'</span><span style="color: var(--shiki-color-text)">;</span></span> 136<span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> { b } </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)">'./b'</span><span style="color: var(--shiki-color-text)">;</span></span> 137<span class="line"></span> 138<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)">c</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-string-expression)">'c'</span><span style="color: var(--shiki-color-text)">;</span></span> 139<span class="line"></span> 140<span class="line"><span style="color: var(--shiki-token-function)">setTimeout</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> 141<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)">`c.js | a=</span><span style="color: var(--shiki-token-keyword)">${</span><span style="color: var(--shiki-color-text)">a</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)"> | b=</span><span style="color: var(--shiki-token-keyword)">${</span><span style="color: var(--shiki-color-text)">b</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)">`</span><span style="color: var(--shiki-color-text)">);</span></span> 142<span class="line"><span style="color: var(--shiki-color-text)">});</span></span> 143<span class="line"></span> 144<span class="line"><span style="color: var(--shiki-token-comment)">// main.js</span></span> 145<span class="line"><span style="color: var(--shiki-token-keyword)">
145import</span><span style="color: var(--shiki-color-text)"> { a } </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)">'./a'</span><span style="color: var(--shiki-color-text)">;</span></span> 146<span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> { b } </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)">'./b'</span><span style="color: var(--shiki-color-text)">;</span></span> 147<span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> { c } </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)">'./c'</span><span style="color: var(--shiki-color-text)">;</span></span> 148<span class="line"></span> 149<span class="line"><span style="color: var(--shiki-token-function)">setTimeout</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> 150<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)">`main.js | a=</span><span style="color: var(--shiki-token-keyword)">${</span><span style="color: var(--shiki-color-text)">a</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)"> | b=</span><span style="color: var(--shiki-token-keyword)">${</span><span style="color: var(--shiki-color-text)">b</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)"> | c=</span><span style="color: var(--shiki-token-keyword)">${</span><span style="color: var(--shiki-color-text)">c</span><span style="color: var(--shiki-token-keyword)">}</span><span style="color: var(--shiki-token-string-expression)">`</span><span style="color: var(--shiki-color-text)">);</span></span> 151<span class="line"><span style="color: var(--shiki-color-text)">});</span></span></code></pre>`),o(f);var g=a(f,4),vs=s(g);n(vs,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-comment)">// a.js</span></span> 152<span class="line"><span style="color: var(--shiki-token-keyword)">let</span><span style="color: var(--shiki-color-text)"> a </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)">'a'</span><span style="color: var(--shiki-color-text)">;</span></span> 153<span class="line"></span> 154<span class="line"><span style="color: var(--shiki-token-keyword)">export</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)"> b };</span></span> 155<span class="line"></span> 156<span class="line"><span style="color: var(--shiki-token-keyword)">let</span><span style="color: var(--shiki-color-text)"> b </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)">'b'</span><span style="color: var(--shiki-color-text)">;</span></span> 157<span class="line"></span> 158<span class="line"><span style="color: var(--shiki-token-comment)">// main.js</span></span> 159<span class="line"><span style="color: var(--shiki-token-keyword)">
159import</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)"> b } </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)">'./a'</span><span style="color: var(--shiki-color-text)">;</span></span> 160<span class="line"></span> 161<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)">'a = '</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">+</span><span style="color: var(--shiki-color-text)"> a);</span></span> 162<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)">'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)"> b);</span></span></code></pre>`),o(g);var K=a(g,4),ds=s(K);n(ds,()=>`<pre class="shiki" style="background-color: var(--shiki-color-background)"><code><span class="line"><span style="color: var(--shiki-token-comment)">// data.js</span></span> 163<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)">let</span><span style="color: var(--shiki-color-text)"> count </span><span style="color: var(--shiki-token-keyword)">=</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-constant)">1</span><span style="color: var(--shiki-color-text)">;</span></span> 164<span class="line"></span> 165<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)">function</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">increment</span><span style="color: var(--shiki-color-text)">() {</span></span> 166<span class="line"><span style="color: var(--shiki-color-text)"> count</span><span style="color: var(--shiki-token-keyword)">++</span><span style="color: var(--shiki-color-text)">;</span></span> 167<span class="line"><span style="color: var(--shiki-color-text)">}</span></span> 168<span class="line"></span> 169<span class="line"><span style="color: var(--shiki-token-comment)">// a.js</span></span> 170<span class="line"><span style="color: var(--shiki-token-keyword)">import</span><span style="color: var(--shiki-color-text)"> { count</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> increment } </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)">'./data'</span><span style="color: var(--shiki-color-text)">;</span></span> 171<span class="line"></span> 172<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)">'count = '</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">+</span><span style="color: var(--shiki-color-text)"> count);</span></span> 173<span class="line"><span style="color: var(--shiki-token-function)">increment</span><span style="color: var(--shiki-color-text)">();</span></span> 174<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)">'count = '</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">+</span><span style="color: var(--shiki-color-text)"> count);</span></span> 175<span class="line"></span> 176<span class="line"><span style="color: var(--shiki-token-comment)">// b.js</span></span> 177<span class="line"><span style="color: var(--shiki-token-keyword)">
177import</span><span style="color: var(--shiki-color-text)"> { count</span><span style="color: var(--shiki-token-punctuation)">,</span><span style="color: var(--shiki-color-text)"> increment } </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)">'./data'</span><span style="color: var(--shiki-color-text)">;</span></span> 178<span class="line"></span> 179<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)">'count = '</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">+</span><span style="color: var(--shiki-color-text)"> count);</span></span> 180<span class="line"><span style="color: var(--shiki-token-function)">increment</span><span style="color: var(--shiki-color-text)">();</span></span> 181<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)">'count = '</span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-keyword)">+</span><span style="color: var(--shiki-color-text)"> count);</span></span> 182<span class="line"></span> 183<span class="line"><span style="color: var(--shiki-token-comment)">// main.js</span></span> 184<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)">'./a'</span><span style="color: var(--shiki-color-text)">;</span></span> 185<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)">'./b'</span><span style="color: var(--shiki-color-text)">;</span></span></code></pre>`),o(K),t(2),o(G),t(2),gs(()=>{e($,"srcset",`${qs}, ${Ss} 2x`),e(B,"src",V),e(B,"srcset",`${V}, ${Ts} 2x`),e(I,"srcset",`${Rs}, ${Us} 2x`),e(R,"src",Z),e(R,"srcset",`${Z}, ${Is} 2x`),e(M,"srcset",`${Ms}, ${Ws} 2x`),e(W,"src",Q),e(W,"srcset",`${Q}, ${Ls} 2x`),e(N,"srcset",`${Cs}, ${Os} 2x`),e(z,"src",Y),e(z,"srcset",`${Y}, ${Ps} 2x`)}),bs(as,_)},$$slots:{default:!0}})),ms()}export{no as component};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.