CINXE.COM

<!DOCTYPE html><html lang="en" class="h-screen-safe overflow-x-hidden"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><title>Parcel</title><meta name="description" content="The zero configuration build tool for the web."><link href="https://parceljs.org/feed.xml" rel="alternate" type="application/rss+xml" title="Blog RSS"><link rel="icon shortcut" href="https://parceljs.org/favicon.fe6f9d11.ico"><link rel="stylesheet" href="https://parceljs.org/src/home/index.21467fe7.css"><link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"><script defer src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script><script type="module" src="https://parceljs.org/src/home/index.ff8867b8.js"></script><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://parceljs.org/assets/home-og.png"><meta name="twitter:site" content="@parceljs"><meta name="twitter:creator" content="@parceljs"><meta property="og:type" content="website"><meta property="og:locale" content="en_US"><meta property="og:url" content="https://parceljs.org"><meta property="og:title" content="Parcel – The zero configuration build tool for the web."><meta property="og:description" content="Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application."><meta property="og:image" content="https://parceljs.org/assets/home-og.png"><script async src="https://www.googletagmanager.com/gtag/js?id=UA-110647385-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-110647385-1");</script></head><body class="bg-white dark:bg-gray-800 overflow-x-hidden"> <header aria-labelledby="parcel" class="md:pb-16 md:pt-16 pb-8 pt-20 relative"> <div class="-skew-y-6 -translate-y-28 absolute bg-gradient-to-tr dark:from-blue-700 dark:to-pink-800 dark:via-purple-800 from-blue-600 left-0 to-pink-500 top-0 transform via-indigo-600" style="z-index:-1;width:100%;height:120%" role="presentation"></div> <div class="box-border max-w-screen-xl md:px-8 mx-auto px-6"> <div class="flex flex-row items-center px-safe"> <div class="flex-shrink-0 h-20 lg:h-36 lg:mr-8 mr-4 relative" role="presentation"> <picture> <source type="image/avif" srcset="https://parceljs.org/avatar.b1be591d.avif 1x, https://parceljs.org/avatar.66e613b2.avif 2x, https://parceljs.org/avatar.24f8f2a1.avif 3x"> <source type="image/webp" srcset="https://parceljs.org/avatar.ca9fe179.webp 1x, https://parceljs.org/avatar.3f9130a2.webp 2x, https://parceljs.org/avatar.0028170f.webp 3x"> <img src="https://parceljs.org/avatar.bf8c558d.png" srcset="https://parceljs.org/avatar.bf8c558d.png 1x, https://parceljs.org/avatar.58f79039.png 2x, https://parceljs.org/avatar.b5188540.png 3x" height="144" width="191" class="h-full w-auto" alt="Parcel logo"> </picture> </div> <h1 id="parcel" class="h-10 lg:h-16 text-red-400"> <span class="sr-only">Parcel</span> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1068.58691 218.40186" height="100%" fill="currentColor" aria-hidden="true"><path d="M134.10156,41.99756c25.2002,0,42.6001,17.40039,42.6001,42.60059v54.60059c0,25.2002-17.3999,42.60059-42.6001,42.60059H66.90088v76.20117H23.7002V41.99756Zm24,46.80078c0-18.6001-10.80029-29.40039-29.40039-29.40039H42.30029V240.6001h6V164.39893h80.40088c18.6001,0,29.40039-10.7998,29.40039-29.40039ZM128.70117,65.39795c15.00049,0,23.40039,8.40039,23.40039,23.40039v46.2002c0,15.00049-8.3999,23.40039-23.40039,23.40039H48.30029v-93.001Zm-5.3999,75.60107c6.6001,0,10.2002-3.6001,10.2002-10.2002V92.99854c0-6.6001-3.6001-10.2002-10.2002-10.2002H66.90088V140.999Z" transform="translate(-23.7002 -40.79785)"></path><path d="M223.79834,258.00049H179.09766L248.69873,41.99756h50.40039L368.7002,258.00049h-46.501l-14.09961-48.60156H238.19873ZM343.19922,240.6001l-55.5-181.20215H260.09863L203.69824,240.6001h5.7002l15-48.60059H322.7998L337.499,240.6001ZM263.69873,65.39795,226.19824,185.99951H320.999L284.09912,65.39795Zm9.8999,24.00049,22.80029,79.20068h-46.2002Z" transform="translate(-23.7002 -40.79785)"></path><path d="M509.99512,258.00049l-34.7998-80.10107H440.39453v80.10107h-43.2002V41.99756H507.2959c25.2002,0,42.59961,17.40039,42.59961,42.60059v50.70068c0,20.3999-11.39941,35.7002-29.39941,40.80029l36,81.90137Zm18.90039-17.40039-34.7998-79.80127h7.7998c18.60059,0,29.40039-10.7998,29.40039-29.3999V88.79834c0-18.6001-10.7998-29.40039-29.40039-29.40039H415.79492V240.6001h6V160.79883h66L522.5957,240.6001ZM525.2959,131.39893c0,15-8.40039,23.3999-23.40039,23.3999H421.79492V65.39795h80.10059c15,0,23.40039,8.40039,23.40039,23.40039Zm-28.80078,6.2998c6.60059,0,10.2002-3.6001,10.2002-10.2002v-34.5c0-6.6001-3.59961-10.2002-10.2002-10.2002H440.39453v54.90039Z" transform="translate(-23.7002 -40.79785)"></path><path d="M697.49316,91.79834c0-6.6001-3.59961-10.2002-10.2002-10.2002h-46.7998c-6.60059,0-10.2002,3.6001-10.2002,10.2002V208.19971c0,6.59961,3.59961,10.19922,10.2002,10.19922H687.293c6.60059,0,10.2002-3.59961,10.2002-10.19922V181.79932h43.20117V216.6001c0,25.19922-17.40039,42.59961-42.60059,42.59961H629.69238c-25.2002,0-42.59961-17.40039-42.59961-42.59961V83.39844c0-25.20068,17.39941-42.60059,42.59961-42.60059h68.40137c25.2002,0,42.60059,17.3999,42.60059,42.60059v34.80029H697.49316Zm-4.7998-27.6001c15,0,23.40039,8.3999,23.40039,23.3999v13.80029h6V87.59814c0-18.6001-10.7998-29.40039-29.40039-29.40039H635.09277c-18.59961,0-29.40039,10.80029-29.40039,29.40039V212.39893c0,18.60059,10.80078,29.40039,29.40039,29.40039h57.60059c18.60059,0,29.40039-10.7998,29.40039-29.40039V199.19971h-6v13.19922c0,15.001-8.40039,23.40039-23.40039,23.40039H635.09277c-15,0-23.40039-8.39941-23.40039-23.40039V87.59814c0-15,8.40039-23.3999,23.40039-23.3999Z" transform="translate(-23.7002 -40.79785)"></path><path d="M920.38965,41.99756V82.79834H822.28809v44.40039h79.501V167.999h-79.501v49.20068h98.10156v40.80078H779.08789V41.99756ZM901.78906,240.6001v-6H803.68848v-84.001h79.501v-6.00049h-79.501V65.39795h98.10059v-6H797.68848V240.6001Z" transform="translate(-23.7002 -40.79785)"></path><path d="M1001.68555,41.99756V217.19971h90.60156v40.80078H958.48535V41.99756Zm72.001,198.60254v-6H983.08594V59.39795h-6V240.6001Z" transform="translate(-23.7002 -40.79785)"></path></svg> </h1> </div> <div class="flex flex-col lg:flex-row px-safe"> <div class="lg:mr-12"> <div class="flex flex-row items-center"> <h2 class="font-extrabold leading-tight lg:my-10 md:text-5xl my-5 text-4xl text-white xl:text-6xl"> The zero configuration build tool for <ul id="languageMarquee" class="align-top inline-block relative whitespace-nowrap z-0"> <li><span class="text-green-400">the web</span>.</li> <li><span class="text-cyan-400">JavaScript</span>.</li> <li><span class="dark:text-rose-500 text-rose-400">CSS</span>.</li> <li><span class="text-yellow-400">HTML</span>.</li> <li><span class="text-emerald-400">TypeScript</span>.</li> <li><span class="dark:text-fuchsia-500 text-fuchsia-400">React</span>.</li> <li><span class="text-cyan-400">images</span>.</li> <li><span class="dark:text-orange-500 text-orange-400">SASS</span>.</li> <li><span class="text-sky-400">SVG</span>.</li> <li><span class="text-green-400">Vue</span>.</li> <li><span class="dark:text-fuchsia-500 text-fuchsia-400">libraries</span>.</li> <li><span class="dark:text-pink-500 text-pink-400">Less</span>.</li> <li><span class="text-yellow-400">CoffeeScript</span>.</li> <li><span class="text-emerald-400">Node</span>.</li> <li><span class="dark:text-red-500 text-red-400">Stylus</span>.</li> <li><span class="text-lime-400">Pug</span>.</li> <li><span class="text-sky-400">Electron</span>.</li> <li><span class="dark:text-red-500 text-red-400">Elm</span>.</li> <li><span class="text-yellow-400">WebGL</span>.</li> <li><span class="dark:text-fuchsia-500 text-fuchsia-400">extensions</span>.</li> <li><span class="text-lime-400">GraphQL</span>.</li> <li><span class="text-cyan-400">MDX</span>.</li> <li><span class="dark:text-rose-500 text-rose-400">XML</span>.</li> </ul> </h2> <style>#languageMarquee li{--animation-duration:calc(23*2650ms);animation:var(--animation-duration)fade-up 2650ms ease-in-out infinite;will-change:opacity,transform;opacity:0;z-index:-1;display:inline;position:absolute;transform:translateY(100%)}#languageMarquee li:first-child{opacity:1;animation:var(--animation-duration)fade-up-first 2650ms ease-in-out,var(--animation-duration)fade-up calc(2650ms + var(--animation-duration))ease-in-out infinite;transform:translateY(0)}#languageMarquee li:last-child{position:static}@keyframes fade-up{0%{opacity:0;transform:translateY(100%)}.25%,4.1%{opacity:1;transform:translateY(0)}4.35%,to{opacity:0;transform:translateY(-100%)}}@keyframes fade-up-first{0%,4.1%{opacity:1;transform:translateY(0)}4.35%,to{opacity:0;transform:translateY(-100%)}}</style> <script type="module">for(let[e,a]of[...languageMarquee.children].entries())e>0&&(a.style.animationDelay=2650+2650*e+"ms");</script> </div> <p class="dark:text-purple-200 lg:mb-16 lg:text-2xl mb-8 text-indigo-100 text-xl">Parcel combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.</p> </div> <div class="bg-gray-100 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-800 flex-shrink-0 h-80 hidden lg:block overflow-hidden p-4 rounded-md shadow-xl w-1/3"> <div class="flex flex-row mb-4"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <pre class="bg-transparent dark:text-gray-200 font-semibold p-0 text-black text-xs"><code><span class="font-normal" id="heroPrompt">$ </span><span class="align-middle bg-gray-500 h-3 inline-block w-2" style="margin-top:-2px" id="heroCursor"></span> <span class="dark:text-blue-500 text-blue-600" id="heroServer" hidden>Server running at <span class="underline">http://localhost:1234</span></span> <span class="dark:text-green-500 font-bold text-green-600" id="heroStatus" hidden>✨ Built in 48ms</span></code></pre> </div> <script type="module">function t(t){return new Promise((e=>setTimeout(e,t)))}!async function(){await t(500);let e="$ ";for(let a of"parcel index.html")await t(Math.floor(80*Math.random())+40),e+=a,heroPrompt.textContent=e;await t(500),heroCursor.style.display="none",await t(20),heroServer.hidden=!1,await t(28),heroStatus.hidden=!1}();</script> </div> <div class="gap-4 gap-y-8 grid grid-cols-2 items-center justify-center md:grid-cols-none md:grid-flow-col md:justify-start px-safe" style="grid-auto-columns:auto auto 1fr"> <a href="/docs/" class="bg-green-400 border border-gray-100 border-opacity-10 dark:bg-green-600 dark:hover:bg-green-500 dark:hover:text-green-50 dark:text-green-50 font-semibold hover:bg-green-300 hover:text-green-800 md:w-48 py-4 rounded-xl text-center text-green-900 text-lg transition-colors">Get started</a> <a href="https://github.com/parcel-bundler/parcel" target="_blank" rel="noopener" class="bg-purple-200 border border-gray-100 border-opacity-10 dark:bg-purple-300 dark:hover:bg-purple-200 font-semibold hover:bg-purple-100 md:w-48 py-4 rounded-xl text-center text-lg text-purple-700 transition-colors">GitHub</a> <button type="button" class="border border-opacity-20 border-white col-span-2 cursor-pointer flex hover:text-purple-50 justify-self-center md:justify-self-end px-6 py-2 rounded-xl text-left text-purple-200 transition-colors" style="-webkit-tap-highlight-color:transparent" onclick="navigator.clipboard.writeText(this.firstElementChild.textContent.slice(2))" x-data="{copied: false}" @click="copied = true" x-effect="copied ? setTimeout(() => copied = false, 3000) : null"> <code>$ yarn add parcel</code> <span class="sr-only">(click to copy to clipboard)</span> <svg class="h-6 ml-4 w-6" style="padding-left:1px" x-show="copied == false" x-transition:enter.scale.80="" fill="none" viewbox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path> </svg> <svg class="dark:text-green-400 h-6 ml-4 text-green-300 w-6" style="display:none" x-show="copied == true" x-transition:enter.scale.80="" fill="none" viewbox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path> </svg> </button> </div> </div> <nav class="absolute dark:text-pink-300 flex gap-5 items-center p-4 right-0 sm:text-base text-lg text-pink-200 top-0"> <div class="home search-container text-base"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> </svg> <input type="text" id="search-input" aria-label="Search" placeholder="Search..."> </div> <a href="/docs/" class="dark:hover:text-pink-200 hover:text-pink-100 transition">Docs</a> <a href="/blog/" class="dark:hover:text-pink-200 hover:text-pink-100 transition">Blog</a> <a href="https://repl.parceljs.org/" class="dark:hover:text-pink-200 hover:text-pink-100 transition">REPL</a> </nav> </header> <section class="-mb-10 dark:text-gray-300 flex flex-row flex-wrap gap-x-10 gap-y-6 items-center justify-center lg:max-w-full lg:pt-32 max-w-xl mx-auto pt-20 px-8 text-gray-700"> <div class="dark:text-gray-400 font-semibold lg:w-auto text-center text-gray-500 uppercase w-full">Trusted by:</div> <svg width="160" viewbox="0 0 195 32" fill="none" role="img" aria-label="Atlassian"> <defs> <linearGradient id="atlassian-blue-gradient" x1="10.2524" y1="12.8168" x2="4.07222" y2="23.4945" gradientunits="userSpaceOnUse"> <stop stop-color="#0052CC"></stop> <stop offset="0.9228" stop-color="#2684FF"></stop> </linearGradient> <linearGradient id="atlassian-white-gradient" x1="10.2586" y1="12.8161" x2="4.08618" y2="23.507" gradientunits="userSpaceOnUse"> <stop stop-color="white" stop-opacity="0.4"></stop> <stop offset="0.9228" stop-color="white"></stop> </linearGradient> </defs> <style>.atlassian-gradient{fill:url(#atlassian-blue-gradient)}.atlassian-a{fill:#2684ff}.atlassian-text{fill:#0052cc}@media (prefers-color-scheme:dark){.atlassian-gradient{fill:url(#atlassian-white-gradient)}.atlassian-a,.atlassian-text{fill:currentColor}}</style> <g> <g> <g> <g> <path d="M7.04039 11.0258C6.68099 10.6294 6.14188 10.6655 5.89029 11.1339L0.0679016 22.8437C-0.147743 23.3121 0.175724 23.8526 0.678893 23.8526H8.80149C9.05307 23.8526 9.30466 23.7085 9.41248 23.4563C11.2095 19.8172 10.1313 14.3045 7.04039 11.0258Z" class="atlassian-gradient"></path> <path d="M11.3174 0.360786C8.04684 5.54916 8.26248 11.278 10.4189 15.6016C12.5754 19.9253 14.2286 23.204 14.3365 23.4562C14.4443 23.7085 14.6959 23.8526 14.9474 23.8526H23.07C23.5732 23.8526 23.9326 23.3121 23.681 22.8437C23.681 22.8437 12.7551 0.937272 12.4675 0.396816C12.2878 -0.107609 11.6409 -0.143639 11.3174 0.360786Z" class="atlassian-a"></path> </g> </g> <g> <g> <g> <g> <path d="M121.727 18.0517C121.727 14.6288 119.894 13.0074 114.79 11.8905C111.951 11.278 111.268 10.6294 111.268 9.72868C111.268 8.61174 112.275 8.10732 114.144 8.10732C116.408 8.10732 118.636 8.79189 120.757 9.76471V5.26092C119.283 4.50428 116.983 3.9278 114.287 3.9278C109.22 3.9278 106.596 6.12565 106.596 9.76471C106.596 12.6471 107.926 14.9531 113.173 15.9619C116.3 16.6105 116.947 17.1149 116.947 18.1598C116.947 19.1686 116.3 19.8172 114.072 19.8172C111.52 19.8172 108.465 18.9525 106.488 17.7635V22.4834C108.07 23.2761 110.154 24.1408 114.036 24.1408C119.535 24.1408 121.727 21.6908 121.727 18.0517Z" class="atlassian-text"></path> <path d="M177.004 4.21603V23.8526H181.173V8.89998L182.934 12.8633L188.828 23.8526H194.076V4.21603H189.907V16.8987L188.325 13.2236L183.581 4.21603H177.004Z" class="atlassian-text"></path> <path d="M150.516 4.21603H145.951V23.8166H150.516V4.21603Z" class="atlassian-text"></path> <path d="M140.668 18.0517C140.668 14.6288 138.835 13.0074 133.731 11.8905C130.892 11.278 130.209 10.6294 130.209 9.72868C130.209 8.61174 131.216 8.10732 133.084 8.10732C135.349 8.10732 137.577 8.79189 139.698 9.76471V5.26092C138.224 4.50428 135.924 3.9278 133.228 3.9278C128.161 3.9278 125.537 6.12565 125.537 9.76471C125.537 12.6471 126.867 14.9531 132.114 15.9619C135.241 16.6105 135.888 17.1149 135.888 18.1598C135.888 19.1686 135.241 19.8172 133.013 19.8172C130.461 19.8172 127.406 18.9525 125.429 17.7635V22.4834C127.01 23.2761 129.095 24.1408 132.977 24.1408C138.511 24.1408 140.668 21.6908 140.668 18.0517Z" class="atlassian-text"></path> <path d="M71.2304 4.21603V23.8526H80.575L82.0485 19.601H75.7949V4.21603H71.2304Z" class="atlassian-text"></path> <path d="M52.721 4.2168V8.46839H57.7886V23.8534H62.3531V8.46839H67.7801V4.2168H52.721Z" class="atlassian-text"></path> </g> </g> <path d="M46.0721 4.2168H40.07L33.2412 23.8173H38.4526L39.423 20.5025C40.5731 20.8268 41.7951 21.043 43.089 21.043C44.3469 21.043 45.5689 20.8628 46.7549 20.5025L47.7253 23.8173H52.9367L46.0721 4.2168ZM43.0531 17.0076C42.1905 17.0076 41.3279 16.8635 40.5372 16.6473L43.0531 8.07205L45.5689 16.6473C44.7782 16.8635 43.9516 17.0076 43.0531 17.0076Z" class="atlassian-text"></path> <path d="M96.7484 4.21603H90.7463L83.9176 23.8166H89.129L90.0994 20.5018C91.2495 20.826 92.4715 21.0422 93.7653 21.0422C95.0233 21.0422 96.2453 20.8621 97.4313 20.5018L98.4017 23.8166H103.613L96.7484 4.21603ZM93.7294 17.0068C92.8668 17.0068 92.0043 16.8627 91.2136 16.6465L93.7294 8.07128L96.2452 16.6465C95.4546 16.8627 94.592 17.0068 93.7294 17.0068Z" class="atlassian-text"></path> <path d="M166.905 4.21603H160.902L154.074 23.8166H159.285L160.255 20.5018C161.406 20.826 162.628 21.0422 163.921 21.0422C165.179 21.0422 166.401 20.8621 167.587 20.5018L168.558 23.8166H173.769L166.905 4.21603ZM163.921 17.0068C163.059 17.0068 162.196 16.8627 161.406 16.6465L163.921 8.07128L166.437 16.6465C165.611 16.8627 164.784 17.0068 163.921 17.0068Z" class="atlassian-text"></path> </g> </g> </g> </g> </svg> <svg width="150" viewbox="0 0 337.6 72" style="enable-background:new 0 0 337.6 72" id="ms-logo" role="img" aria-label="Microsoft"> <style>#ms-logo .st0{fill:#737373;fill:currentColor}#ms-logo .st1{fill:#f25022}#ms-logo .st2{fill:#7fba00}#ms-logo .st3{fill:#00a4ef}#ms-logo .st4{fill:#ffb900}</style> <path class="st0" d="M140.4,14.4v43.2h-7.5V23.7h-0.1l-13.4,33.9h-5l-13.7-33.9h-0.1v33.9h-6.9V14.4h10.8l12.4,32h0.2l13.1-32H140.4 z M146.6,17.7c0-1.2,0.4-2.2,1.3-3c0.9-0.8,1.9-1.2,3.1-1.2c1.3,0,2.4,0.4,3.2,1.2s1.3,1.8,1.3,3c0,1.2-0.4,2.2-1.3,3 c-0.9,0.8-1.9,1.2-3.2,1.2s-2.3-0.4-3.1-1.2C147.1,19.8,146.6,18.8,146.6,17.7z M154.7,26.6v31h-7.3v-31H154.7z M176.8,52.3 c1.1,0,2.3-0.2,3.6-0.8c1.3-0.5,2.5-1.2,3.6-2v6.8c-1.2,0.7-2.5,1.2-4,1.5c-1.5,0.3-3.1,0.5-4.9,0.5c-4.6,0-8.3-1.4-11.1-4.3 c-2.9-2.9-4.3-6.6-4.3-11c0-5,1.5-9.1,4.4-12.3c2.9-3.2,7-4.8,12.4-4.8c1.4,0,2.8,0.2,4.1,0.5c1.4,0.3,2.5,0.8,3.3,1.2v7 c-1.1-0.8-2.3-1.5-3.4-1.9c-1.2-0.4-2.4-0.7-3.6-0.7c-2.9,0-5.2,0.9-7,2.8s-2.6,4.4-2.6,7.6c0,3.1,0.9,5.6,2.6,7.3 C171.6,51.4,173.9,52.3,176.8,52.3z M204.7,26.1c0.6,0,1.1,0,1.6,0.1s0.9,0.2,1.2,0.3v7.4c-0.4-0.3-0.9-0.6-1.7-0.8 s-1.6-0.4-2.7-0.4c-1.8,0-3.3,0.8-4.5,2.3s-1.9,3.8-1.9,7v15.6h-7.3v-31h7.3v4.9h0.1c0.7-1.7,1.7-3,3-4 C201.2,26.6,202.8,26.1,204.7,26.1z M207.9,42.6c0-5.1,1.5-9.2,4.3-12.2c2.9-3,6.9-4.5,12-4.5c4.8,0,8.6,1.4,11.3,4.3 s4.1,6.8,4.1,11.7c0,5-1.5,9-4.3,12c-2.9,3-6.8,4.5-11.8,4.5c-4.8,0-8.6-1.4-11.4-4.2C209.3,51.3,207.9,47.4,207.9,42.6z M215.5,42.3c0,3.2,0.7,5.7,2.2,7.4s3.6,2.6,6.3,2.6c2.6,0,4.7-0.8,6.1-2.6c1.4-1.7,2.1-4.2,2.1-7.6c0-3.3-0.7-5.8-2.1-7.6 c-1.4-1.7-3.5-2.6-6-2.6c-2.7,0-4.7,0.9-6.2,2.7C216.2,36.5,215.5,39,215.5,42.3z M250.5,34.8c0,1,0.3,1.9,1,2.5 c0.7,0.6,2.1,1.3,4.4,2.2c2.9,1.2,5,2.5,6.1,3.9c1.2,1.5,1.8,3.2,1.8,5.3c0,2.9-1.1,5.2-3.4,7c-2.2,1.8-5.3,2.6-9.1,2.6 c-1.3,0-2.7-0.2-4.3-0.5c-1.6-0.3-2.9-0.7-4-1.2v-7.2c1.3,0.9,2.8,1.7,4.3,2.2c1.5,0.5,2.9,0.8,4.2,0.8c1.6,0,2.9-0.2,3.6-0.7 c0.8-0.5,1.2-1.2,1.2-2.3c0-1-0.4-1.8-1.2-2.6c-0.8-0.7-2.4-1.5-4.6-2.4c-2.7-1.1-4.6-2.4-5.7-3.8s-1.7-3.2-1.7-5.4 c0-2.8,1.1-5.1,3.3-6.9c2.2-1.8,5.1-2.7,8.6-2.7c1.1,0,2.3,0.1,3.6,0.4s2.5,0.6,3.4,0.9V34c-1-0.6-2.1-1.2-3.4-1.7 c-1.3-0.5-2.6-0.7-3.8-0.7c-1.4,0-2.5,0.3-3.2,0.8C250.9,33.1,250.5,33.8,250.5,34.8z M266.9,42.6c0-5.1,1.5-9.2,4.3-12.2 c2.9-3,6.9-4.5,12-4.5c4.8,0,8.6,1.4,11.3,4.3s4.1,6.8,4.1,11.7c0,5-1.5,9-4.3,12c-2.9,3-6.8,4.5-11.8,4.5c-4.8,0-8.6-1.4-11.4-4.2 C268.4,51.3,266.9,47.4,266.9,42.6z M274.5,42.3c0,3.2,0.7,5.7,2.2,7.4s3.6,2.6,6.3,2.6c2.6,0,4.7-0.8,6.1-2.6 c1.4-1.7,2.1-4.2,2.1-7.6c0-3.3-0.7-5.8-2.1-7.6c-1.4-1.7-3.5-2.6-6-2.6c-2.7,0-4.7,0.9-6.2,2.7C275.3,36.5,274.5,39,274.5,42.3z M322.9,32.6h-10.9v25h-7.4v-25h-5.2v-6h5.2v-4.3c0-3.2,1.1-5.9,3.2-8s4.8-3.1,8.1-3.1c0.9,0,1.7,0.1,2.4,0.1s1.3,0.2,1.8,0.4v6.3 c-0.2-0.1-0.7-0.3-1.3-0.5c-0.6-0.2-1.3-0.3-2.1-0.3c-1.5,0-2.7,0.5-3.5,1.4c-0.8,0.9-1.2,2.4-1.2,4.2v3.7h10.9v-7l7.3-2.2v9.2h7.4 v6h-7.4v14.5c0,1.9,0.4,3.2,1,4c0.7,0.8,1.8,1.2,3.3,1.2c0.4,0,0.9-0.1,1.5-0.3c0.6-0.2,1.1-0.4,1.5-0.7v6c-0.5,0.3-1.2,0.5-2.3,0.7 c-1.1,0.2-2.1,0.3-3.2,0.3c-3.1,0-5.4-0.8-6.9-2.4c-1.5-1.6-2.3-4.1-2.3-7.4L322.9,32.6L322.9,32.6z"></path> <g> <rect class="st1" width="34.2" height="34.2"></rect> <rect x="37.8" class="st2" width="34.2" height="34.2"></rect> <rect y="37.8" class="st3" width="34.2" height="34.2"></rect> <rect x="37.8" y="37.8" class="st4" width="34.2" height="34.2"></rect> </g> </svg> <svg width="160" viewbox="0 0 312.8 55.5" role="img" aria-label="Sourcegraph"> <style>.st0{fill:#ff5543}.st1{fill:#a112ff}.st2{fill:#00cbec}.st3{fill:currentColor}</style> <g> <g> <g> <path class="st0" d="M34.8,53.8c-2.8,0.5-5.5-1.3-6-4.1L21.2,8.2c-0.5-2.8,1.3-5.5,4.1-6s5.5,1.3,6,4.1l7.6,41.5 C39.4,50.6,37.5,53.3,34.8,53.8z"></path> </g> <g> <path class="st1" d="M14.9,46.7C13.1,47,11.3,46.4,10,45c-1.8-2.2-1.6-5.4,0.6-7.2l32.1-27.3c2.2-1.8,5.4-1.6,7.2,0.6 s1.6,5.4-0.6,7.2l-32,27.3C16.6,46.2,15.7,46.6,14.9,46.7z"></path> </g> <g> <g> <path class="st2" d="M50.8,40.1c-0.9,0.2-1.8,0.1-2.6-0.2L8.4,25.8c-2.7-1-4.1-3.9-3.1-6.6s3.9-4.1,6.6-3.1l39.7,14.1 c2.7,1,4.1,3.9,3.1,6.6C54.1,38.6,52.5,39.8,50.8,40.1z"></path> </g> </g> </g> <path class="st3" d="M84,35.1c0-1-0.4-1.8-1.1-2.4c-0.7-0.6-1.6-1.2-2.7-1.7s-2.3-1-3.6-1.6c-1.3-0.5-2.5-1.2-3.6-2s-2-1.8-2.7-3 s-1.1-2.7-1.1-4.5c0-1.6,0.3-3,0.8-4.1c0.5-1.2,1.3-2.1,2.3-2.9c1-0.8,2.1-1.3,3.5-1.7c1.3-0.4,2.8-0.6,4.5-0.6 c1.9,0,3.7,0.2,5.3,0.5s3.1,0.8,4.1,1.4l-2,5.3C87,17.4,86,17,84.6,16.7c-1.4-0.4-2.8-0.5-4.4-0.5c-1.5,0-2.6,0.3-3.4,0.9 s-1.2,1.4-1.2,2.4c0,0.9,0.4,1.7,1.1,2.3c0.7,0.6,1.6,1.2,2.7,1.7s2.3,1.1,3.6,1.6c1.3,0.6,2.5,1.2,3.6,2s2,1.8,2.7,2.9 c0.7,1.2,1.1,2.6,1.1,4.3s-0.3,3.2-0.9,4.5s-1.4,2.3-2.4,3.1s-2.3,1.5-3.8,1.9s-3.1,0.6-4.9,0.6c-2.3,0-4.4-0.2-6.1-0.7 c-1.8-0.4-3.1-0.9-3.9-1.3l2-5.4c0.3,0.2,0.8,0.4,1.3,0.6c0.5,0.2,1.2,0.4,1.8,0.6c0.7,0.2,1.4,0.3,2.2,0.5 c0.8,0.1,1.5,0.2,2.3,0.2c1.9,0,3.3-0.3,4.3-1C83.5,37.3,84,36.4,84,35.1z"></path> <path class="st3" d="M93.1,32.2c0-3.9,1-7,2.9-9.1s4.6-3.2,8.1-3.2c1.9,0,3.5,0.3,4.8,0.9c1.4,0.6,2.5,1.4,3.4,2.5s1.6,2.4,2,3.9 s0.7,3.2,0.7,5c0,3.9-1,7-2.9,9.1s-4.6,3.2-8.1,3.2c-1.9,0-3.5-0.3-4.8-0.9c-1.4-0.6-2.5-1.4-3.4-2.5s-1.6-2.4-2-3.9 C93.3,35.7,93.1,34,93.1,32.2z M99.3,32.2c0,1,0.1,2,0.3,2.8c0.2,0.9,0.5,1.6,0.8,2.3c0.4,0.7,0.9,1.2,1.5,1.5 c0.6,0.4,1.3,0.5,2.2,0.5c1.6,0,2.8-0.6,3.5-1.7c0.8-1.1,1.2-3,1.2-5.4c0-2.1-0.4-3.9-1.1-5.2c-0.7-1.3-1.9-2-3.6-2 c-1.5,0-2.7,0.6-3.5,1.7C99.7,27.8,99.3,29.6,99.3,32.2z"></path> <path class="st3" d="M124.1,20.6v13.2c0,1.9,0.2,3.3,0.7,4.1c0.4,0.8,1.3,1.3,2.6,1.3c1.1,0,2.1-0.3,2.9-1c0.8-0.7,1.3-1.5,1.7-2.5 v-15h6v16.2c0,1.3,0.1,2.5,0.2,3.7c0.1,1.2,0.3,2.3,0.6,3.3h-4.6l-1.1-3.4h-0.2c-0.7,1.2-1.7,2.2-3,2.9c-1.3,0.8-2.8,1.2-4.5,1.2 c-1.2,0-2.2-0.2-3.2-0.5c-0.9-0.3-1.7-0.8-2.3-1.5c-0.6-0.7-1.1-1.7-1.4-2.9S118,36.9,118,35V20.6H124.1z"></path> <path class="st3" d="M155.5,26.2c-1-0.3-1.8-0.5-2.6-0.5c-1.1,0-2,0.3-2.7,0.9s-1.2,1.3-1.5,2.2v15h-6V20.6h4.7l0.7,3.1h0.2 c0.5-1.1,1.2-2,2.1-2.7s2-0.9,3.2-0.9c0.8,0,2.5,0.4,3.4,0.8L155.5,26.2z"></path> <path class="st3" d="M175.1,42.4c-0.9,0.7-2.1,1.2-3.4,1.6c-1.3,0.4-2.7,0.5-4.1,0.5c-1.9,0-3.4-0.3-4.7-0.9 c-1.3-0.6-2.3-1.4-3.1-2.5s-1.4-2.4-1.7-3.9c-0.4-1.5-0.5-3.2-0.5-5c0-3.9,0.9-7,2.7-9.1s4.3-3.2,7.7-3.2c1.7,0,3.1,0.1,4.1,0.4 s2,0.6,2.8,1.1l-1.4,4.9c-0.7-0.3-1.4-0.6-2.1-0.8c-0.7-0.2-1.5-0.3-2.4-0.3c-1.7,0-2.9,0.6-3.8,1.7c-0.9,1.1-1.3,2.9-1.3,5.3 c0,1,0.1,1.9,0.3,2.7s0.5,1.6,1,2.2c0.4,0.6,1,1.1,1.7,1.5s1.5,0.5,2.4,0.5c1,0,1.9-0.1,2.6-0.4c0.7-0.3,1.3-0.6,1.9-1L175.1,42.4z "></path> <path class="st3" d="M196.4,41.8c-0.9,0.7-2.2,1.4-3.8,1.9s-3.3,0.8-5.1,0.8c-3.8,0-6.5-1.1-8.2-3.3s-2.6-5.2-2.6-9 c0-4.1,1-7.2,2.9-9.2s4.7-3.1,8.2-3.1c1.2,0,2.3,0.2,3.4,0.5s2.1,0.8,3,1.5s1.6,1.7,2.1,2.9c0.5,1.2,0.8,2.7,0.8,4.5 c0,0.7,0,1.3-0.1,2.1c-0.1,0.7-0.2,1.5-0.3,2.3h-14c0.1,2,0.6,3.4,1.5,4.4s2.4,1.5,4.4,1.5c1.3,0,2.4-0.2,3.4-0.6 c1-0.4,1.8-0.8,2.3-1.2L196.4,41.8z M187.7,24.7c-1.6,0-2.8,0.5-3.5,1.4c-0.8,0.9-1.2,2.2-1.4,3.8h8.6c0.1-1.7-0.1-3-0.8-3.9 C190.1,25.2,189.1,24.7,187.7,24.7z"></path> <path class="st3" d="M220.6,43.8c0,3.4-0.9,5.9-2.7,7.5s-4.4,2.4-7.7,2.4c-2.2,0-4-0.2-5.3-0.5s-2.3-0.6-2.9-1l1.3-4.8 c0.7,0.3,1.5,0.6,2.5,0.8s2.1,0.4,3.5,0.4c2.1,0,3.5-0.5,4.3-1.4s1.1-2.2,1.1-3.8V42h-0.2c-1.1,1.5-3,2.2-5.8,2.2 c-3,0-5.2-0.9-6.7-2.8c-1.5-1.9-2.2-4.8-2.2-8.7c0-4.2,1-7.3,3-9.4s4.9-3.2,8.6-3.2c2,0,3.8,0.1,5.3,0.4s2.8,0.6,3.8,1L220.6,43.8 L220.6,43.8z M210.4,39.3c1.2,0,2.1-0.3,2.7-0.8c0.6-0.5,1.1-1.3,1.5-2.4V25.7c-1-0.4-2.2-0.6-3.6-0.6c-1.6,0-2.8,0.6-3.6,1.7 c-0.9,1.2-1.3,3-1.3,5.6c0,2.3,0.4,4,1.1,5.2C207.9,38.8,209,39.3,210.4,39.3z"></path> <path class="st3" d="M238.1,26.2c-1-0.3-1.8-0.5-2.6-0.5c-1.1,0-2,0.3-2.7,0.9s-1.2,1.3-1.5,2.2v15h-6V20.6h4.7l0.7,3.1h0.2 c0.5-1.1,1.2-2,2.1-2.7s2-0.9,3.2-0.9c0.8,0,1.7,0.2,2.7,0.5L238.1,26.2z"></path> <path class="st3" d="M241,21.7c1.2-0.6,2.1-0.8,3.8-1.1c1.7-0.3,3.5-0.5,5.3-0.5c1.6,0,3,0.2,4,0.6s1.9,0.9,2.6,1.7 c0.6,0.7,1.1,1.6,1.3,2.6c0.3,1,0.4,2.1,0.4,3.3c0,1.4,0,2.7-0.1,4.1c-0.1,1.4-0.1,2.7-0.2,4.1c0,1.3,0,2.6,0.1,3.9 s0.3,2.4,0.7,3.6H254l-1-3.2l0,0c-0.6,1-1.5,1.8-2.6,2.5s-2.5,1-4.3,1c-1.1,0-2.1-0.2-2.9-0.5c-0.9-0.3-1.6-0.8-2.2-1.4 s-1.1-1.3-1.4-2.1c-0.3-0.8-0.5-1.7-0.5-2.8c0-1.4,0.3-2.6,1-3.6s1.5-1.8,2.7-2.4s2.6-1,4.3-1.3s3.5-0.3,5.6-0.2 c0.2-1.7,0.1-3-0.4-3.7c-0.5-0.8-1.5-1.1-3.1-1.1c-1.2,0-2.5,0.1-3.8,0.4s-1.9,0.4-2.7,0.8L241,21.7z M248.1,39.2 c1.2,0,2.2-0.3,2.9-0.8s1.2-1.1,1.6-1.7v-3c-1-0.1-1.9-0.1-2.8,0c-0.9,0.1-1.7,0.2-2.3,0.4s-1.2,0.5-1.6,0.9 c-0.4,0.4-0.6,0.9-0.6,1.5c0,0.9,0.3,1.5,0.8,2C246.5,39,247.2,39.2,248.1,39.2z"></path> <path class="st3" d="M263.1,20.6h4.4l0.7,2.8h0.2c0.8-1.2,1.8-2,2.9-2.6s2.4-0.8,4-0.8c2.9,0,5.1,0.9,6.6,2.8s2.2,4.8,2.2,8.9 c0,2-0.2,3.8-0.7,5.4s-1.2,3-2.1,4.1s-2,2-3.3,2.6s-2.8,0.9-4.5,0.9c-1,0-1.8-0.1-2.4-0.2c-0.6-0.1-1.2-0.4-1.9-0.7v9.5h-6V20.6 H263.1z M273.4,25c-1.2,0-2.1,0.3-2.8,0.9s-1.2,1.5-1.6,2.7v9.7c0.4,0.3,0.9,0.6,1.4,0.8s1.2,0.3,2,0.3c1.7,0,3-0.6,3.9-1.8 s1.3-3.2,1.3-6.1c0-2-0.3-3.6-1-4.7C276,25.6,274.9,25,273.4,25z"></path> <path class="st3" d="M301.6,43.8V30.6c0-1.9-0.3-3.3-0.8-4.1s-1.5-1.3-2.9-1.3c-1,0-2,0.3-2.8,1c-0.9,0.7-1.4,1.6-1.7,2.7v14.8h-6 V11.3h6v11.9h0.2c0.7-1,1.7-1.8,2.7-2.4c1.1-0.6,2.5-0.9,4.1-0.9c1.2,0,2.2,0.2,3.1,0.5s1.7,0.8,2.3,1.5s1.1,1.7,1.3,2.9 s0.4,2.7,0.4,4.5v14.5C307.5,43.8,301.6,43.8,301.6,43.8z"></path> </g> </svg> <svg width="100" fill="none" viewbox="0 0 744 144" role="img" aria-label="Xchart.com"> <style>.downchev{fill:#193750}.upchev{fill:#73d2e1}.xchart-fill{fill:#193750}@media (prefers-color-scheme:dark){.downchev,.xchart-fill{fill:currentColor}}</style> <path class="downchev" d="M87 4.2L65 35a6.2 6.2 0 01-10 0L33 4.2A10 10 0 0021 .8 100 100 0 000 13l42.7 60.8c9.5 13.6 25.1 13.6 34.6 0L120 13A100 100 0 0099 .8a10 10 0 00-12 3.4z"></path> <path class="upchev" d="M87 139.8L65 109a6.2 6.2 0 00-10 0l-22 30.7a10 10 0 01-12 3.4C13.5 140 6.5 135.9 0 131l42.7-60.8c9.5-13.6 25.1-13.6 34.6 0L120 131a100 100 0 01-21 12.2 10 10 0 01-12-3.4z"></path> <path class="xchart-fill" d="M173.4 37c6.9 0 15.7 1 26.4 3.2l5.3 1.3-.8 21.4c-10.4-1-18.1-1.6-23.1-1.6-9.2 0-15.2 2-18.3 6-2.9 4-4.3 11.4-4.3 22.5 0 11 1.4 18.7 4.3 22.9 3 4 9.2 6 18.5 6l23-1.6.7 21.6c-14.1 2.9-24.9 4.3-32.3 4.3-14.6 0-25.2-4.2-31.7-12.6-6.3-8.4-9.5-22-9.5-40.6s3.3-32 10-40.2C148 41.2 158.7 37 173.3 37zM246.4 141.6H220V0h26.5v45.3A53.4 53.4 0 01271 38c13.2 0 22.3 4 27.4 12 5 8 7.5 20.2 7.5 36.8v54.8h-26.6V87.4c0-8.5-1-14.8-3-18.8-2-4.2-5.9-6.3-11.8-6.3-5.2 0-10.3.8-15.5 2.4l-2.6.8v76zM400.4 72v42c.3 3.3.8 5.6 1.6 7 .8 1.2 2.4 2 5 2.6L406 144a75 75 0 01-16.2-1.4c-4-1-8-2.8-12.1-5.7a65 65 0 01-29.1 7.1c-20.5 0-30.8-11-30.8-33.2 0-10.8 2.9-18.4 8.6-22.8a46.6 46.6 0 0126.1-8.1l21.2-1.6V72c0-4.2-.9-7-2.7-8.5-1.9-1.6-4.9-2.4-9-2.4L325 62.7l-.8-18.8c14.1-4 27.5-5.9 40.2-5.9 12.8 0 22 2.7 27.6 8.1 5.7 5.4 8.5 14 8.5 25.9zm-44.6 26.7c-7.4.7-11.1 4.7-11.1 12.1 0 7.4 3.2 11.2 9.7 11.2 5 0 10.5-.9 16.5-2.5l3-.8V97.1l-18.1 1.6zM419.8 141.6V40.4H446v10.8A99.7 99.7 0 01477.8 38v27.3a302.4 302.4 0 00-27.5 7.1l-4 1.4v67.8h-26.5zM551.4 63.5H527V105c0 4 0 7 .2 8.7.3 1.6 1 3 2.2 4.2 1.3 1.2 3.3 1.8 6 1.8l15-.4 1.2 21.7a99 99 0 01-20.2 3c-12 0-20-2.7-24.4-8-4.4-5.6-6.5-15.7-6.5-30.4v-42h-11.7V40.3h11.7v-28H527v28h24.4v23.1z"></path> <path class="xchart-fill" d="M564 142.9v-15.2h13.3v15.2H564zM605.5 96c3.2 0 7.3.5 12.3 1.5l2.5.5-.4 9.7c-4.8-.5-8.4-.7-10.8-.7-4.2 0-7 1-8.5 2.7-1.3 1.8-2 5.2-2 10.2 0 5 .7 8.5 2 10.4 1.4 1.8 4.3 2.7 8.6 2.7l10.7-.7.4 9.8c-6.6 1.3-11.6 1.9-15 1.9-7 0-11.8-1.9-14.9-5.7-3-3.8-4.4-10-4.4-18.4 0-8.4 1.5-14.5 4.6-18.2 3.1-3.8 8-5.7 15-5.7zM631.6 102.3c3.3-4.2 8.7-6.3 16.4-6.3 7.6 0 13 2.1 16.4 6.3 3.2 4.2 4.9 10 4.9 17.6 0 16-7.1 24.1-21.3 24.1-14.2 0-21.3-8-21.3-24 0-7.7 1.7-13.5 5-17.7zm9.5 28c1.3 2.2 3.6 3.3 6.9 3.3 3.3 0 5.5-1.1 6.7-3.3 1.3-2.2 2-5.7 2-10.4s-.7-8.1-2-10.3c-1.2-2-3.4-3.2-6.7-3.2-3.3 0-5.6 1.1-6.9 3.2a21.4 21.4 0 00-1.8 10.3c0 4.7.6 8.2 1.8 10.4zM689.8 142.9h-12.4V97.1h12.3v2.6a23 23 0 0111-3.7c5 0 8.8 1.4 11.5 4.3a34.9 34.9 0 0115.5-4.3c6.1 0 10.4 1.8 12.7 5.3 2.4 3.5 3.6 9 3.6 16.8v24.8h-12.4v-24.5c0-3.9-.4-6.7-1.3-8.6-.8-1.9-2.6-2.8-5.2-2.8-2 0-4.3.4-7.2 1.3l-1.4.4c.3 4.6.4 8 .4 10.5v23.7h-12.4v-23.5c0-4.6-.4-7.7-1.2-9.6-.8-1.9-2.5-2.8-5.3-2.8-2.4 0-4.7.4-7 1.3l-1.2.3V143z"></path> </svg> </section> <main class="px-safe"> <section aria-labelledby="dx" class="max-w-screen-xl md:px-8 mx-auto my-40 px-6" x-data="{tab: 'zero-config'}"> <h3 id="dx" class="bg-clip-text bg-gradient-to-r dark:from-blue-500 dark:to-blue-500 dark:via-blue-300 font-extrabold from-blue-600 inline-block lg:text-6xl mb-8 text-4xl text-transparent to-blue-600 via-blue-400">A build tool for the rest of us.</h3> <p class="dark:text-gray-400 font-medium lg:text-3xl max-w-5xl text-gray-500 text-xl">Parcel starts with a great development experience, from starting a new project, to iterating and debugging, and shipping to production. No more fiddling with configuration, or spending hours to keep up with best practices – it just works!</p> <div class="gap-5 grid grid-cols-2 mt-10"> <section class="bg-gradient-to-br col-span-2 dark:from-purple-900 dark:to-blue-900 from-purple-100 md:p-10 p-5 rounded-xl to-blue-100"> <h4 id="zero-config" class="dark:text-blue-400 font-semibold text-blue-500 text-xl">Zero config</h4> <div class="gap-x-4 gap-y-8 grid lg:gap-12 lg:grid-cols-2 lg:md-8 mt-4"> <div class="dark:text-purple-300 font-medium lg:text-xl text-gray-600 text-lg"> <p class="mb-4">Start with an HTML file. Add a <code class="dark:text-purple-100 font-semibold text-gray-800"><script></code> tag. Maybe some CSS. How about TypeScript? SASS? Images? No problem. Parcel works out of the box just as you'd expect.</p> <p class="lg:text-lg text-base">Parcel supports many languages and file types out of the box, from web technologies like HTML, CSS, and JavaScript, to assets like images, fonts, videos, and more. And when you use a file type that isn't included by default, Parcel will <strong class="dark:text-purple-100 font-semibold text-gray-800">automatically install</strong> all of the necessary plugins and dev dependencies for you!</p> <a class="block dark:text-blue-400 font-medium hover:underline mt-8 text-blue-700 text-lg" href="/getting-started/webapp/">Get started →</a> </div> <div x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false" class="bg-gray-800 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out flex flex-col justify-self-center max-w-full-screen overflow-hidden rounded-md shadow-xl text-black transition" :class="{'translate-y-0 opacity-100': shown, 'motion-safe:translate-y-3 opacity-70': !shown}"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center mb-4 p-2 relative"> <div class="absolute flex flex-row left-2 top-2"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="lg:ml-0 md:ml-5 ml-0 text-gray-500 text-xs">index.html</div> </div> <pre class="bg-transparent flex-grow overflow-auto pt-0"><code class="language-html lg:text-sm text-xs"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>My First Parcel App<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>link</span> <span class="attr-name token">rel</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>stylesheet<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>styles.css<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span>Hello, World!<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>module<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>app.tsx<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre></div> </div> </section> <section class="bg-gradient-to-br col-span-2 dark:from-indigo-900 dark:to-pink-900 flex flex-col from-indigo-100 md:col-span-1 md:p-10 p-5 rounded-xl to-pink-100" style="background-position:0 0;background-size:200% 400%"> <h4 class="dark:text-blue-400 font-semibold text-blue-500 text-xl">Dev server</h4> <div class="flex flex-col flex-grow"> <div class="dark:text-purple-300 font-medium lg:text-xl mb-4 md:mt-8 mt-4 text-gray-600 text-lg"> <p class="mb-4">Parcel includes a development server out of the box. Just run <code class="dark:text-purple-100 font-semibold text-gray-800">parcel index.html</code> to get started.</p> </div> <div x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false" role="img" aria-label="A browser showing a hello world message" class="bg-gray-100 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out h-60 lg:h-80 max-w-sm mx-auto overflow-hidden rounded-md shadow-xl text-black transition w-full" :class="{'translate-y-0 opacity-100': shown, 'motion-safe:translate-y-3 md:translate-y-0 opacity-70': !shown}"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center mb-4 p-3 relative"> <div class="absolute flex flex-row left-4 top-4"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="bg-gray-300 dark:bg-gray-700 lg:px-10 md:ml-0 md:px-4 ml-16 px-10 py-1 rounded-md text-gray-500 text-xs">http://localhost:1234</div> </div> <span class="font-serif p-4 text-2xl">Hello world!</span> </div> <div class="dark:text-purple-300 flex flex-col flex-grow font-medium mt-8 text-gray-600 text-xl"> <p class="mb-4 md:text-lg text-base">Need HTTPS? Run Parcel with the <code class="dark:text-purple-100 font-semibold text-gray-800">--https</code> flag, and it will automatically generate a certificate for you! Or, if you like, you can provide your own.</p> <p class="flex-grow md:text-lg text-base">Parcel also has a built-in API proxy, which can help simulate your production environment.</p> <a class="block dark:text-blue-400 font-medium hover:underline mt-8 text-blue-700 text-lg" href="/features/development/#dev-server">Learn more →</a> </div> </div> </section> <section class="bg-gradient-to-br col-span-2 dark:from-indigo-900 dark:to-pink-900 from-indigo-100 md:col-span-1 md:p-10 p-5 rounded-xl to-pink-100" style="background-position:100% 0;background-size:200% 400%"> <h4 class="dark:text-blue-400 font-semibold text-blue-500 text-xl">Hot reloading</h4> <div class="flex flex-col"> <div class="dark:text-purple-300 font-medium lg:text-xl md:mt-8 mt-4 text-gray-600 text-lg"> <p>When you make a change, Parcel automatically updates your code in the browser – no page reload necessary!</p> </div> <div class="max-w-full-screen mt-8 relative self-center" x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false"> <div role="img" aria-label="A browser showing a page that is being edited by a text editor. The text updates to reflect the changes." class="bg-gray-100 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out h-48 md:h-64 overflow-hidden rounded-md shadow-xl text-black transition" :class="{'translate-y-0 translate-x-0 opacity-100': shown, 'motion-safe:-translate-y-3 motion-safe:-translate-x-3 opacity-70': !shown}" style="max-width:min(90%,20rem)"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center mb-4 p-3 relative"> <div class="absolute flex flex-row left-4 top-4"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="bg-gray-300 dark:bg-gray-700 lg:px-10 ml-10 px-4 py-1 rounded-md text-gray-500 text-xs">http://localhost:1234</div> </div> <span id="hmrPreview" class="font-serif p-4 text-2xl">Hello world!</span> </div> <div role="img" aria-label="A code editor that is editing the source code for a React component. The changes are reflected in the web browser." class="-mt-20 bg-gray-800 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out h-48 lg:w-80 md:h-64 ml-20 overflow-hidden rounded-md shadow-xl text-black transition w-72" :class="{'translate-y-0 translate-x-0 opacity-100': shown, 'motion-safe:translate-y-3 motion-safe:translate-x-3 opacity-70': !shown}"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center mb-4 p-2 relative"> <div class="absolute flex flex-row left-2 top-2"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"> <div hidden id="hmrUnsaved" class="bg-gray-900 h-1 m-1 rounded-full w-1"></div> </div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="lg:ml-0 md:ml-5 ml-0 text-gray-500 text-xs">Greeting.tsx</div> </div> <pre class="bg-transparent pt-0"><code id="hmrCode" class="language-jsx lg:text-sm text-xs"><span class="keyword token">import</span> React <span class="keyword token">from</span> <span class="string token">'react'</span><span class="punctuation token">;</span> <span class="keyword token">export</span> <span class="keyword token">function</span> <span class="function token">Greeting</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h1</span><span class="punctuation token">></span></span><span class="plain-text token">Hello world!</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h1</span><span class="punctuation token">></span></span><span class="punctuation token">;</span> <span class="punctuation token">}</span></code></pre> </div> </div> <script type="module">let e=hmrCode.querySelector(".plain-text");function t(e){return new Promise((t=>setTimeout(t,e)))}e.textContent=hmrPreview.textContent="Hello world!",hmrUnsaved.hidden=!0,async function n(a){await t(1e3);let l=e.textContent.split(" ").pop().slice(0,-1);e.innerHTML=`Hello <span class="bg-green-700">${l}</span>!`,await t(1e3);let i='<span style="width: 1px; margin-right: -1px; height: 1.2em" class="inline-block align-text-top bg-white"></span>';e.innerHTML=`Hello ${i}!`;let r="";for(let n of a)await t(Math.floor(120*Math.random())+60),r+=n,e.innerHTML=`Hello ${r}${i}!`,hmrUnsaved.hidden=!1;await t(300),hmrUnsaved.hidden=!0,e.innerHTML=`Hello ${r}!`,await t(200),hmrPreview.textContent=`Hello ${r}!`,await t(3e3),await n("Parcel"===a?"world":"Parcel")}("Parcel");</script> <div class="dark:text-purple-300 font-medium mt-8 text-gray-600 text-xl"> <p class="mb-4 md:text-lg text-base">Parcel also integrates with <strong class="dark:text-purple-100 font-semibold text-gray-800">React Fast Refresh</strong> and the <strong class="dark:text-purple-100 font-semibold text-gray-800">Vue Hot Reloading API</strong> to automatically preserve your application state between updates. This gives you instant feedback as you make changes, without taking you out of context.</p> <a class="block dark:text-blue-400 font-medium hover:underline mt-8 text-blue-700 text-lg" href="/features/development/#hot-reloading">Learn more →</a> </div> </div> </section> <section class="bg-gradient-to-bl col-span-2 dark:from-purple-900 dark:to-pink-900 from-purple-100 md:p-10 p-5 rounded-xl to-pink-100" style="background-position:100% 100%;background-size:100% 200%"> <h4 class="dark:text-blue-400 font-semibold text-blue-500 text-xl">Diagnostics</h4> <div class="gap-x-4 gap-y-8 grid lg:gap-12 lg:grid-cols-2 md:mt-8 mt-4"> <div class="dark:text-pink-300 font-medium lg:text-xl text-gray-600 text-lg"> <p class="mb-4">If you make an error in your code or configuration, Parcel displays <strong class="dark:text-pink-200 font-semibold text-gray-800">beautiful diagnostics</strong> in your terminal and in the browser.</p> <p class="mb-4">Every error includes a syntax highlighted code frame pointing to the exact location where the error occurred, along with hints about how to fix the issue.</p> <p>Many diagnostics even include a documentation link where you can learn more.</p> </div> <div x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false" class="bg-gray-50 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-800 delay-100 duration-700 ease-out justify-self-center max-w-full-screen md:h-80 overflow-auto pt-4 rounded-md shadow-xl transition" :class="{'translate-y-0 opacity-100': shown, 'motion-safe:translate-y-3 opacity-70': !shown}"> <div class="flex flex-row ml-4"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <pre class="bg-transparent dark:text-gray-200 font-semibold overflow-auto pb-4 text-black text-xs"><code><span class="font-normal">$ parcel index.html</span> <span class="dark:text-blue-500 text-blue-600">Server running at http://localhost:1234</span> <span class="dark:text-red-500 text-red-600">🚨 Build failed. @parcel/core: Cannot resolve 'ract' from './index.js'</span> <span class="font-normal"><span class="underline">/dev/app/index.js:1:19</span> <span class="dark:text-red-500 text-red-600">></span> 1 | <span class="dark:text-green-500 text-green-700">import</span> React <span class="dark:text-green-500 text-green-700">from</span> <span class="dark:text-blue-500 text-blue-600">'ract'</span>; <span class="dark:text-red-500 text-red-600">></span> | <span class="dark:text-red-500 text-red-600">^^^^^^</span> 2 | 3 | <span class="dark:text-green-500 text-green-700">function</span> <span class="dark:text-purple-400 text-purple-600">Test</span>() {</span> <span class="dark:text-red-500 text-red-600">@parcel/resolver-default: Cannot find module 'ract'</span> <span class="dark:text-blue-500 text-blue-600">Did you mean '<span class="underline">react</span>'?</span> </code></pre> </div> </div> </section> </div> </section> <section aria-labelledby="performance" class="my-40 relative"> <div class="-skew-y-6 -translate-y-28 absolute bg-gradient-to-r dark:from-gray-900 dark:to-gray-800 from-gray-50 to-white top-0 transform" style="z-index:-1;width:100vw;height:calc(100% + 10rem);left:calc(-1*env(safe-area-inset-left))"></div> <div role="presentation" class="max-w-screen-xl md:px-8 mx-auto px-6"> <h3 id="performance" class="bg-clip-text bg-gradient-to-r dark:from-yellow-500 dark:to-yellow-500 dark:via-yellow-200 font-extrabold from-orange-500 inline-block lg:pb-8 lg:text-6xl pb-4 text-4xl text-transparent to-orange-500 via-yellow-400">It's lightning fast.</h3> <p class="dark:text-gray-400 font-medium lg:text-3xl max-w-5xl text-gray-500 text-xl">Parcel builds your code in parallel using worker threads, utilizing all of the cores on your machine. Everything is cached, so you never build the same code twice. It's like using watch mode, but even when you restart Parcel!</p> <div class="gap-5 grid grid-cols-2 mt-10"> <section class="bg-gradient-to-br col-span-2 dark:from-blue-900 dark:to-indigo-900 from-yellow-50 md:p-10 p-5 rounded-xl to-yellow-100"> <h4 class="dark:text-yellow-500 font-semibold text-orange-600 text-xl">Native performance</h4> <div class="gap-4 grid lg:gap-12 lg:grid-cols-2 lg:md-8 mt-4"> <div class="max-w-sm relative w-full" role="img" aria-label="A speedometer-like dial that animates to maximum speed."> <svg viewbox="0 0 375 187.5" class="max-w-full"> <mask id="mask"> <path d="M 375 187.5 A 7.5 7.5 90 0 0 0 187.5 L 42 187.5 A 1.5 1.5 90 0 1 331.5 187.5 L 375 187.5" fill="white"></path> </mask> <foreignObject x="0" y="0" width="375" height="187.5" mask="url(#mask)"> <div style="width:375px;height:187.5px;background:conic-gradient(from -90deg,#2563eb,#34d399 10%,#fbbf24 35%,#dc2626 50%) 0 0/375px 375px"></div> </foreignObject> </svg> <svg viewbox="0 0 375 187.5" id="speedometer" x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false" class="absolute dark:text-gray-100 left-0 max-w-full text-gray-700 top-0" style="transform-origin:50% 91.6%;will-change:transform;transform:rotate(-88deg)" :style="{animation: shown && 'speedometer 2s linear 300ms, speedometer-done 4s ease-in-out 2.3s infinite'}"> <g transform="translate(170 0) scale(2)"> <path fill="currentColor" d="M13.886,84.243L2.83,83.875c0,0,3.648-70.77,3.956-74.981C7.104,4.562,7.832,0,8.528,0 c0.695,0,1.752,4.268,2.053,8.894C10.883,13.521,13.886,84.243,13.886,84.243z"></path> <path fill="currentColor" d="M16.721,85.475c0,4.615-3.743,8.359-8.36,8.359S0,90.09,0,85.475c0-4.62,3.743-8.363,8.36-8.363 S16.721,80.855,16.721,85.475z"></path> <circle fill="currentColor" class="dark:text-gray-800 text-white" cx="8.426" cy="85.471" r="2.691"></circle> </g> </svg> </div> <style>@keyframes speedometer{0%{transform:rotate(-85deg)}10%{transform:rotate(-15deg)}40%{transform:rotate(45deg)}60%{transform:rotate(75deg)}85%{transform:rotate(90deg)}to{transform:rotate(85deg)}}@keyframes speedometer-done{0%{transform:rotate(85deg)}50%{transform:rotate(80deg)}to{transform:rotate(85deg)}}</style> <div class="dark:text-indigo-300 font-medium lg:text-xl text-gray-600 text-lg"> <p class="mb-4">Parcel's JavaScript compiler, CSS transformer, and source maps implementation are written in <strong class="dark:text-indigo-100 font-medium text-gray-800">Rust</strong> for maximum performance. It's <strong class="dark:text-gray-200 font-semibold text-gray-800">10-20x faster</strong> than other JavaScript-based tools!</p> <p class="lg:text-lg mb-4 text-base">Parcel's JavaScript compiler is built on <a href="https://swc.rs" target="_blank" rel="noopener" class="dark:hover:text-indigo-50 dark:text-indigo-100 font-semibold hover:text-gray-700 text-gray-800 transition-colors">SWC</a>, which handles transpiling JavaScript, JSX, and TypeScript. On top of SWC, Parcel implements dependency collection, bundling, scope hoisting, tree shaking, Node emulation, hot reloading, and more.</p> <p class="lg:text-lg mb-4 text-base">Parcel's CSS transformer and minifier is built in Rust on top of the browser-grade CSS parser used in Firefox. It's over <strong class="dark:text-gray-200 font-semibold text-gray-800">100x faster</strong> than other JavaScript-based transformers and minifiers.</p> </div> </div> </section> <section class="bg-gradient-to-tl col-span-2 dark:from-green-900 dark:to-blue-900 from-red-100 md:col-span-1 md:p-10 p-5 rounded-xl to-yellow-50" style="background-position:0 0;background-size:200% 100%"> <h4 class="dark:text-yellow-500 font-semibold text-orange-600 text-xl">Multi-core</h4> <div class="flex flex-col md:mt-8 mt-4"> <div class="flex flex-col overflow-hidden" role="img" aria-label="An animated bar chart showing the activity of 4 CPU cores over time."> <div class="flex flex-row h-10 items-end mb-4 overflow-hidden"> <div id="bars1" class="flex flex-row h-full items-end" style="will-change:transform;animation:10s linear bars,20s linear 10s infinite bars-loop"></div> <div id="bars2" class="flex flex-row h-full items-end" style="will-change:transform;animation:20s linear infinite bars-2"></div> </div> <div class="flex flex-row h-10 items-end mb-4 overflow-hidden"> <div id="bars3" class="flex flex-row h-full items-end" style="will-change:transform;animation:10s linear bars,20s linear 10s infinite bars-loop"></div> <div id="bars4" class="flex flex-row h-full items-end" style="will-change:transform;animation:20s linear infinite bars-2"></div> </div> <div class="flex flex-row h-10 items-end mb-4 overflow-hidden"> <div id="bars5" class="flex flex-row h-full items-end" style="will-change:transform;animation:10s linear bars,20s linear 10s infinite bars-loop"></div> <div id="bars6" class="flex flex-row h-full items-end" style="will-change:transform;animation:20s linear infinite bars-2"></div> </div> <div class="flex flex-row h-10 items-end mb-4 overflow-hidden"> <div id="bars7" class="flex flex-row h-full items-end" style="will-change:transform;animation:10s linear bars,20s linear 10s infinite bars-loop"></div> <div id="bars8" class="flex flex-row h-full items-end" style="will-change:transform;animation:20s linear infinite bars-2"></div> </div> <script type="module">function e(e){for(let t=0;t<20;t++){let t=40*Math.random()+60,r=t>90?"to-red-500":t>70?"to-yellow-500":"to-yellow-300",a=document.createElement("div");a.className=`bg-gradient-to-t from-green-400 via-yellow-400 ${r} mr-1 rounded-t-sm`,a.style.width="20px",a.style.marginRight="5px",a.style.height=t+"%",e.appendChild(a)}}e(bars1),e(bars2),e(bars3),e(bars4),e(bars5),e(bars6),e(bars7),e(bars8);</script> <style>@keyframes bars{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes bars-2{0%{transform:translate(0)}to{transform:translate(-200%)}}@keyframes bars-loop{0%{transform:translate(100%)}to{transform:translate(-100%)}}@media (prefers-reduced-motion){#bars1,#bars2,#bars3,#bars4,#bars5,#bars6,#bars7,#bars8{animation:none!important}}</style> </div> <div class="dark:text-blue-300 font-medium md:mt-8 md:text-xl mt-4 text-gray-600 text-lg"> <p class="mb-4"><strong class="dark:text-blue-100 font-medium text-gray-800">Parcel is designed around a multi-core architecture that parallelizes work across all of your cores and takes full advantage of modern hardware.</strong></p> <p class="md:text-lg text-base">Transforming individual source files is parallelized, as well as packaging and optimizing output bundles. All of this is completely automatic and does not require any work by plugin authors or other tools that integrate with Parcel.</p> </div> </div> </section> <section class="bg-gradient-to-tl col-span-2 dark:from-green-900 dark:to-blue-900 from-red-100 md:col-span-1 md:p-10 p-5 rounded-xl to-yellow-50" style="background-position:100% 0;background-size:200% 100%"> <h4 class="dark:text-yellow-500 font-semibold text-orange-600 text-xl">Reliable caching</h4> <div class="flex flex-col"> <div class="dark:text-blue-300 font-medium lg:my-8 lg:text-xl my-4 text-gray-600 text-lg"> <p class="mb-4"><strong class="dark:text-blue-100 font-semibold text-gray-800">Everything Parcel does is cached</strong> – transformation, dependency resolution, bundling, optimizing, and everything in between. This means the dev server restarts instantly, and the same code is never built twice.</p> </div> <div> <svg role="img" aria-label="Caching diagram. Shows dashboard.js and profile.js connected to package.json, and dashboard.css and profile.css connected to .postcssrc. Changing .postcssrc invalidates dashboard.css and profile.css." width="450" height="155" viewbox="0 0 450 155" class="font-semibold max-w-md mx-auto w-full" x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false"> <g transform="translate(0, -40)"> <g class="text-green-600 text-sm" style="opacity:0" :style="{animation: shown && 'fade-in-3 300ms ease-in 1s forwards, caching-fade-out 500ms ease-out 6s forwards'}"> <rect x="10" y="40" width="100" height="45" rx="10" fill="currentColor" stroke-width="2"></rect> <text x="19" y="67" fill="white">dashboard.js</text> </g> <g class="text-green-600 text-sm" style="opacity:0" :style="{animation: shown && 'fade-in-3 300ms ease-in 3s forwards, caching-fade-out 500ms ease-out 6s forwards'}"> <rect x="120" y="40" width="100" height="45" rx="10" fill="currentColor" stroke-width="2"></rect> <text x="142" y="67" fill="white">profile.js</text> </g> <line x1="168" y1="90" x2="130" y2="140" stroke="currentColor" class="dark:text-blue-400 text-blue-600" stroke-width="2" marker-end="url(#arrow-blue)" style="opacity:0" :style="{animation: shown && 'fade-in-3 300ms ease-in 3.5s forwards, caching-fade-out 500ms ease-out 6s forwards'}"></line> <g class="dark:text-blue-500 text-blue-600 text-sm" style="opacity:0" :style="{animation: shown && 'fade-in-3 300ms ease-in 1.5s forwards, caching-fade-out 500ms ease-out 6s forwards'}"> <rect x="60" y="150" width="100" height="45" rx="10" fill="currentColor" stroke-width="2"></rect> <text x="69" y="177" fill="white">package.json</text> <line x1="55" y1="90" x2="90" y2="140" stroke="currentColor" class="dark:text-blue-400 text-blue-600" stroke-width="2" marker-end="url(#arrow-blue)"></line> </g> </g> <g transform="translate(220, -40)"> <g class="text-pink-600 text-sm" style="opacity:0" :style="{animation: shown && 'fade-in-3 300ms ease-in 2s forwards, caching-fade-out 500ms ease-out 6s forwards, fade-in-2 300ms ease-in 8.5s forwards'}"> <rect x="10" y="40" width="100" height="45" rx="10" fill="currentColor" stroke-width="2"></rect> <text x="13" y="67" fill="white">dashboard.css</text> </g> <g class="text-pink-600 text-sm" style="opacity:0" :style="{animation: shown && 'fade-in-3 300ms ease-in 4s forwards, caching-fade-out 500ms ease-out 6s forwards, fade-in-2 300ms ease-in 8.5s forwards'}"> <rect x="120" y="40" width="100" height="45" rx="10" fill="currentColor" stroke-width="2"></rect> <text x="137" y="67" fill="white">profile.css</text> </g> <line x1="170" y1="90" x2="130" y2="140" stroke="currentColor" class="dark:text-blue-400 text-blue-600" stroke-width="2" marker-end="url(#arrow-blue)" style="opacity:0" :style="{animation: shown && 'fade-in-3 300ms ease-in 4.5s forwards, caching-fade-out 500ms ease-out 6s forwards, fade-in-2 300ms ease-in 8.5s forwards'}"></line> <g class="dark:text-blue-500 text-blue-600 text-sm" style="opacity:0" :style="{animation: shown && 'fade-in-3 300ms ease-in 2.5s forwards, caching-fade-out 500ms ease-out 6s forwards, fade-in-2 300ms ease-in 8s forwards'}"> <rect x="60" y="150" width="100" height="45" rx="10" fill="currentColor" stroke-width="2"></rect> <text x="75" y="177" fill="white">.postcssrc</text> </g> <line x1="55" y1="90" x2="90" y2="140" stroke="currentColor" class="dark:text-blue-400 text-blue-600" stroke-width="2" marker-end="url(#arrow-blue)" style="opacity:0" :style="{animation: shown && 'fade-in-3 300ms ease-in 2.5s forwards, caching-fade-out 500ms ease-out 6s forwards, fade-in-2 300ms ease-in 8.5s forwards'}"></line> </g> </svg> <style>@keyframes fade-in-2{0%{opacity:.3}to{opacity:1}}@keyframes fade-in-3{0%{opacity:0}to{opacity:1}}@keyframes caching-fade-out{0%{opacity:1}to{opacity:.3}}</style> </div> <div class="dark:text-blue-300 font-medium lg:mt-8 lg:text-xl mt-4 text-gray-600 text-lg"> <p class="lg:text-lg text-base">Parcel automatically tracks all of the files, configuration, plugins, and dev dependencies that are involved in your build, and granularly invalidates the cache when something changes. It integrates with low-level operating system APIs to determine what files have changed in milliseconds, no matter the project size.</p> </div> </div> </section> <section class="bg-gradient-to-tr col-span-2 dark:from-purple-900 dark:to-blue-900 from-yellow-50 md:p-10 p-5 rounded-xl to-red-100"> <h4 class="dark:text-yellow-500 font-semibold text-orange-600 text-xl">Lazy dev builds</h4> <div class="gap-4 grid items-center lg:gap-12 lg:grid-cols-2 md:mt-8 mt-4"> <div> <svg role="img" aria-label="Diagram showing the resources needed for two pages. Only one of them is built." width="450" height="200" viewbox="0 0 450 200" class="font-normal max-w-md mx-auto w-full" x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false"> <g transform="translate(0, 35)"> <g class="text-green-600 text-sm"> <rect x="10" y="40" width="100" height="45" rx="10" fill="currentColor" stroke-width="2"></rect> <text x="34" y="67" fill="white">browser</text> </g> <g class="text-pink-600 text-sm" :style="{animation: shown && 'fade-in-2 0.5s ease-out 1s backwards'}"> <rect x="170" y="5" width="100" height="45" rx="10" fill="currentColor" stroke-width="2"></rect> <text x="185" y="32" fill="white">/dashboard</text> </g> <g class="text-pink-600 text-sm" style="opacity:.3"> <rect x="170" y="80" width="100" height="45" rx="10" fill="currentColor" stroke-width="2"></rect> <text x="200" y="107" fill="white">/profile</text> </g> </g> <g transform="translate(160, 0)"> <g class="dark:text-blue-500 text-blue-600 text-sm" :style="{animation: shown && 'fade-in-2 0.5s ease-out 1.7s backwards'}"> <rect x="170" y="5" width="100" height="45" rx="10" fill="currentColor" stroke-width="2"></rect> <text x="182" y="32" fill="white">dashboard.js</text> </g> <g class="dark:text-blue-500 text-blue-600 text-sm" :style="{animation: shown && 'fade-in-2 0.5s ease-out 1.7s backwards'}"> <rect x="170" y="80" width="100" height="45" rx="10" fill="currentColor" stroke-width="2"></rect> <text x="198" y="107" fill="white">react.js</text> </g> <g class="dark:text-blue-500 text-blue-600 text-sm" style="opacity:.3"> <rect x="170" y="155" width="100" height="45" rx="10" fill="currentColor" stroke-width="2"></rect> <text x="195" y="182" fill="white">profile.js</text> </g> </g> <line x1="115" y1="90" x2="160" y2="62" stroke="currentColor" class="dark:text-blue-400 text-blue-600" stroke-width="2" marker-end="url(#arrow-blue)" style="animation:.5s ease-out 1s backwards fade-in-2"></line> <line x1="115" y1="100" x2="160" y2="137" stroke="currentColor" class="dark:text-blue-400 text-blue-600" stroke-width="2" marker-end="url(#arrow-blue)" style="opacity:.3"></line> <line x1="275" y1="57" x2="320" y2="28" stroke="currentColor" class="dark:text-blue-400 text-blue-600" stroke-width="2" marker-end="url(#arrow-blue)" style="animation:.5s ease-out 1.7s backwards fade-in-2"></line> <line x1="275" y1="67" x2="320" y2="95" stroke="currentColor" class="dark:text-blue-400 text-blue-600" stroke-width="2" marker-end="url(#arrow-blue)" style="animation:.5s ease-out 1.7s backwards fade-in-2"></line> <line x1="275" y1="132" x2="320" y2="110" stroke="currentColor" class="dark:text-blue-400 text-blue-600" stroke-width="2" marker-end="url(#arrow-blue)" style="opacity:.3"></line> <line x1="275" y1="142" x2="320" y2="175" stroke="currentColor" class="dark:text-blue-400 text-blue-600" stroke-width="2" marker-end="url(#arrow-blue)" style="opacity:.3"></line> </svg> </div> <div class="dark:text-purple-300 font-medium lg:text-xl text-gray-600 text-lg"> <p class="mb-4"><strong class="dark:text-purple-100 font-semibold text-gray-800">In development, Parcel can defer building files until they are requested in the browser.</strong> This means you only need to wait for the page you're actually working on to build! If your project has many entries or code split points, this can massively reduce dev server startup time.</p> <p class="lg:text-lg text-base">And when you do request a page, Parcel is smart enough to eagerly build all of the dependencies of that page at once, without waiting for them to be requested as well – no network waterfalls!</p> <a class="block dark:text-yellow-500 font-medium hover:underline mt-8 text-lg text-orange-700" href="/features/development/#lazy-mode">Learn more →</a> </div> </div> </section> </div> </div> </section> <section aria-labelledby="optimization" class="max-w-screen-xl md:px-8 mx-auto my-40 px-6"> <h3 id="optimization" class="bg-clip-text bg-gradient-to-r dark:from-indigo-400 dark:to-green-400 dark:via-blue-400 font-extrabold from-indigo-500 inline-block lg:mb-8 lg:text-6xl mb-4 text-4xl text-transparent to-green-500 via-blue-500">Automatic production optimization.</h3> <p class="dark:text-gray-400 font-medium lg:text-3xl max-w-6xl text-gray-500 text-xl">Parcel optimizes your whole app for production automatically. This includes tree-shaking and minifying your JavaScript, CSS, and HTML, resizing and optimizing images, content hashing, automatic code splitting, and much more.</p> <div class="gap-5 grid grid-cols-2 mt-10"> <section class="bg-gradient-to-br col-span-2 dark:from-blue-900 dark:to-indigo-900 from-green-100 md:p-10 p-5 rounded-xl to-blue-100"> <h4 class="dark:text-green-400 font-semibold text-green-600 text-xl">Tree shaking</h4> <div class="gap-x-4 gap-y-8 grid lg:gap-12 lg:grid-cols-2 lg:md-8 mt-4"> <div class="dark:text-indigo-300 font-medium lg:text-xl text-gray-600 text-lg"> <p class="mb-4"><strong class="dark:text-indigo-100 font-semibold text-gray-800">Parcel supports tree-shaking both ES modules and CommonJS out of the box!</strong> It statically analyzes the imports and exports of each module, and removes everything that isn't used.</p> <p class="lg:text-lg text-base">Tree shaking even works across dynamic <code class="dark:text-indigo-100 font-semibold text-gray-800">import()</code> boundaries, shared bundles, and even across languages! If you use <strong class="dark:text-indigo-100 font-semibold text-gray-800">CSS modules</strong>, unused classes will be removed automatically.</p> <a class="block dark:text-green-400 font-medium hover:underline mt-8 text-green-700 text-lg" href="/features/scope-hoisting/">Learn more →</a> </div> <div class="gap-3 grid lg:grid-cols-2" x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false"> <div class="-ml-9 bg-gray-800 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out lg:h-60 max-w-md md:-mt-9 md:ml-0 mx-auto overflow-hidden rounded-md shadow-xl text-black transition w-full" :class="{'translate-y-0 opacity-100': shown, 'motion-safe:-translate-y-3 opacity-70': !shown}"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center mb-4 p-2 relative"> <div class="absolute flex flex-row left-2 top-2"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="text-gray-500 text-xs">index.js</div> </div> <pre class="bg-transparent pt-0"><code class="language-jsx text-xs"><span class="keyword token">import</span> <span class="punctuation token">{</span>add<span class="punctuation token">}</span> <span class="keyword token">from</span> <span class="string token">'./math'</span><span class="punctuation token">;</span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">add</span><span class="punctuation token">(</span><span class="number token">2</span><span class="punctuation token">,</span> <span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> </div> <div class="bg-gray-800 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out lg:h-60 max-w-md md:ml-0 md:mt-9 ml-9 mx-auto overflow-hidden rounded-md shadow-xl text-black transition w-full" :class="{'translate-y-0 opacity-100': shown, 'motion-safe:translate-y-3 opacity-70': !shown}"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center mb-4 p-2 relative"> <div class="absolute flex flex-row left-2 top-2"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="text-gray-500 text-xs">math.js</div> </div> <pre class="bg-transparent pt-0"><code class="language-jsx text-xs"><span class="keyword token">export</span> <span class="keyword token">function</span> <span class="function token">add</span><span class="punctuation token">(</span><span class="parameter token">a<span class="punctuation token">,</span> b</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> a <span class="operator token">+</span> b<span class="punctuation token">;</span> <span class="punctuation token">}</span> </code></pre> <pre class="bg-transparent pt-0"><code class="language-jsx text-xs" :class="{unusedCode: shown}"><span class="keyword token">export</span> <span class="keyword token">function</span> <span class="function token">square</span><span class="punctuation token">(</span><span class="parameter token">a</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> a <span class="operator token">*</span> a<span class="punctuation token">;</span> <span class="punctuation token">}</span></code></pre> </div> <style>.unusedCode,.unusedCode>*{animation:.5s ease-out 2s forwards fade-out}@keyframes fade-out{to{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}}</style> </div> </div> </section> <section class="bg-gradient-to-b col-span-2 dark:from-blue-900 dark:to-green-900 from-blue-100 md:col-span-1 md:p-10 p-5 rounded-xl to-green-100" style="background-size:100% 200%"> <h4 class="dark:text-green-400 font-semibold text-green-600 text-xl">Minification</h4> <div class="flex flex-col lg:mt-8 mt-4"> <div class="dark:text-blue-300 font-medium lg:text-xl mr-2 text-gray-600 text-lg"> <p>Parcel includes minifiers for JavaScript, CSS, HTML, and SVG out of the box! Just run <code class="dark:text-blue-100 font-semibold text-gray-800">parcel build index.html</code>, and your whole application will be built and optimized automatically.</p> <a class="block dark:text-green-400 font-medium hover:underline mt-8 text-green-700 text-lg" href="/features/production/#minification">Learn more →</a> </div> <div class="flex flex-row lg:mt-10 mb-4 mt-8" role="img" aria-label="An animation showing a file size reduction from 2.18 MB to 32.42 kB."> <svg width="48" height="48" viewbox="0 0 48 48" class="dark:text-green-500 text-green-600" fill="none" style="margin-right:1em"> <circle cx="24" cy="24" r="20" stroke-width="8" stroke="currentColor" stroke-opacity="0.3"></circle> <circle cx="24" cy="24" r="20" stroke-width="8" stroke="currentColor" stroke-linecap="round" id="progress" style="transform-origin:50%;transition:stroke-dashoffset .35s;transform:rotate(-90deg)"></circle> </svg> <div class="dark:text-green-500 font-semibold lg:text-5xl tabular-nums text-4xl text-green-600" id="size">542 KB</div> </div> <script type="module">let e=2*parseInt(progress.getAttribute("r"))*Math.PI;progress.style.strokeDasharray=`${e} ${e}`;let t,r=2187,s=32.42,a=r,i=()=>{size.textContent=(a>1024?a/1024:a).toLocaleString("en-US",{minimumFractionDigits:2,maximumFractionDigits:2,style:"unit",unit:a>1024?"megabyte":"kilobyte"}),size.classList.remove("text-green-600","dark:text-green-500","text-yellow-600","text-red-600","dark:text-yellow-400","dark:text-red-500"),a>1024?size.classList.add("text-red-600","dark:text-red-500"):a>128?size.classList.add("text-yellow-600","dark:text-yellow-400"):size.classList.add("text-green-600","dark:text-green-500"),progress.style.strokeDashoffset=e-(r-a)/2154.58*e,a<=s&&(progress.parentElement.setAttribute("hidden","true"),size.textContent="✨ "+size.textContent)};function n(e){return new Promise((t=>setTimeout(t,e)))}new IntersectionObserver((async()=>{cancelAnimationFrame(t);let e=async()=>{a-=Math.random()*(a>1024?30:a>256?20:5)+(a>256?10:2),a=Math.max(a,s),i(),a>s&&(await n(a>1024?5:a>256?20:50),t=requestAnimationFrame(e))};a=r,i(),progress.parentElement.removeAttribute("hidden"),await n(800),t=requestAnimationFrame(e)}),{threshold:1}).observe(size),i();</script> </div> </section> <section class="bg-gradient-to-b col-span-2 dark:from-blue-900 dark:to-green-900 from-blue-100 md:col-span-1 md:p-10 p-5 rounded-xl row-span-2 to-green-100"> <h4 class="dark:text-green-400 font-semibold text-green-600 text-xl">Image optimization</h4> <div class="flex flex-col lg:mt-8 mt-4"> <div class="dark:text-blue-300 font-medium lg:text-xl mr-2 text-gray-600 text-lg"> <p class="mb-4"><strong class="dark:text-blue-100 font-semibold text-gray-800">Parcel supports resizing, converting, and optimizing images!</strong> Just pass query parameters for the format and size you need when referencing the image file in your HTML, CSS, JavaScript, etc. and Parcel will take care of the conversion and optimization process.</p> <p class="lg:text-lg mb-4 text-base">You can even request multiple sizes or formats of the same source image for different devices or browsers!</p> <a class="block dark:text-green-400 font-medium hover:underline my-8 text-green-700 text-lg" href="/recipes/image/">Learn more →</a> </div> <div x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false" class="bg-gray-800 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out md:w-full overflow-hidden rounded-md self-center shadow-xl text-black transition w-full-screen" :class="{'translate-y-0 opacity-100': shown, 'motion-safe:translate-y-3 opacity-70': !shown}"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center mb-4 p-2 relative"> <div class="absolute flex flex-row left-2 top-2"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="lg:ml-0 md:ml-5 ml-0 text-gray-500 text-xs">index.html</div> </div> <pre class="bg-transparent pt-0 whitespace-pre-wrap"><code class="language-html text-xs"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>picture</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>source</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>image/webp<span class="punctuation token">"</span></span> <span class="attr-name token">srcset</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>image.jpg?as=webp&width=400, image.jpg?as=webp&width=800 2x<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>source</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>image/jpeg<span class="punctuation token">"</span></span> <span class="attr-name token">srcset</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>image.jpg?width=400, image.jpg?width=800 2x<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>image.jpg?width=400<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>400<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>picture</span><span class="punctuation token">></span></span></code></pre></div> </div> </section> <section class="bg-gradient-to-b col-span-2 dark:from-blue-900 dark:to-green-900 from-blue-100 md:col-span-1 md:p-10 p-5 rounded-xl to-green-100" style="background-position:0 100%;background-size:100% 200%"> <h4 class="dark:text-green-400 font-semibold text-green-600 text-xl">Compression</h4> <div class="dark:text-blue-300 font-medium lg:mt-8 lg:text-xl mr-2 mt-4 text-gray-600 text-lg"> <p>Compress your app before you deploy using Gzip and Brotli.</p> <a class="block dark:text-green-400 font-medium hover:underline mt-8 text-green-700 text-lg" href="/features/production/#compression">Learn more →</a> </div> </section> <section class="bg-gradient-to-br col-span-2 dark:from-green-900 dark:to-indigo-900 from-green-100 md:p-10 p-5 rounded-xl to-blue-100" style="background-size:100% 200%"> <h4 class="dark:text-green-400 font-semibold text-green-600 text-xl">Code splitting</h4> <div class="gap-x-4 gap-y-8 grid lg:gap-12 lg:grid-cols-2 md:mt-8 mt-4"> <div class="dark:text-blue-300 font-medium lg:text-xl mr-2 text-gray-600 text-lg"> <p class="mb-4">When multiple parts of your application depend on the same common modules, they are <strong class="dark:text-blue-100 font-semibold text-gray-800">automatically deduplicated into a separate bundle.</strong> This allows commonly used dependencies to be loaded in parallel with your application code and cached separately by the browser!</p> <p class="lg:text-lg text-base"><strong class="dark:text-blue-100 font-semibold text-gray-800">Code splitting is also supported for CSS.</strong> If you import CSS from your JavaScript, a sibling CSS bundle will be produced and loaded in parallel with the JS bundle.</p> <a class="block dark:text-green-400 font-medium hover:underline mt-8 text-green-700 text-lg" href="/features/code-splitting/">Learn more →</a> </div> <div> <svg role="img" aria-label="Diagram showing dashboard and profile pages connected to a shared bundle containing react and lodash." width="370" viewbox="30 0 370 230" class="font-semibold max-w-full mx-auto"> <defs> <marker id="arrow-blue" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" class="dark:text-blue-400 text-blue-600"></path> </marker> <marker id="arrow-green" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" class="dark:text-green-400 text-green-600"></path> </marker> </defs> <g class="dark:text-green-600 text-green-600"> <rect x="30" y="5" width="150" height="80" rx="10" fill="currentColor" stroke="none" stroke-width="2"></rect> <text x="65" y="50" fill="white">Dashboard</text> </g> <g class="dark:text-pink-600 text-pink-600"> <rect x="250" y="5" width="150" height="80" rx="10" fill="currentColor" stroke="none" stroke-width="2"></rect> <text x="302" y="50" fill="white">Profile</text> </g> <g class="dark:text-blue-600 text-blue-600"> <rect x="140" y="150" width="150" height="80" rx="10" fill="currentColor" stroke="none" stroke-width="2"></rect> <text x="195" y="185" fill="white">React</text> <text x="190" y="205" fill="white">Lodash</text> </g> <line x1="110" y1="90" x2="190" y2="140" stroke="currentColor" class="dark:text-blue-400 text-blue-600" stroke-width="2" marker-end="url(#arrow-blue)"></line> <line x1="320" y1="90" x2="240" y2="140" stroke="currentColor" class="dark:text-blue-400 text-blue-600" stroke-width="2" marker-end="url(#arrow-blue)"></line> </svg> </div> </div> </section> <section class="bg-gradient-to-br col-span-2 dark:from-green-900 dark:to-indigo-900 from-green-100 md:p-10 p-5 rounded-xl to-blue-100" style="background-position:0 100%;background-size:100% 200%"> <h4 class="dark:text-green-400 font-semibold text-green-600 text-xl">Content hashing</h4> <div class="gap-4 grid lg:gap-12 lg:grid-cols-2 md:mt-8 mt-4"> <div> <svg role="img" aria-label="Diagram showing dashboard.js and react.js being built to a bundle named dashboard.a96cdf.js." width="430" viewbox="0 0 430 225" class="font-semibold max-w-full mx-auto" x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false"> <defs> <linearGradient spreadmethod="pad" id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-opacity="0" stop-color="currentColor" class="dark:text-blue-500 text-blue-600"></stop> <stop offset="40%" stop-opacity="0.3" stop-color="currentColor" class="dark:text-blue-500 text-blue-600"></stop> <stop offset="50%" stop-opacity="0.3" stop-color="currentColor" class="dark:text-blue-500 text-blue-600"></stop> <stop offset="100%" stop-opacity="0" stop-color="currentColor" class="dark:text-blue-500 text-blue-600"></stop> </linearGradient> </defs> <g transform="translate(-30 -5)"> <path d="M 180 5 C 195 64 256 72 280 75 L 280 155 C 258 155 195 158 180 230 Z" fill="url(#gradient)" style="opacity:0" :style="{animation: shown && 'fade-in-3 500ms ease-in 800ms forwards'}"></path> <g class="dark:text-green-600 text-green-600"> <rect x="30" y="5" width="150" height="80" rx="10" fill="currentColor" stroke="none" stroke-width="2"></rect> <text x="58" y="50" fill="white">dashboard.js</text> </g> <g class="dark:text-pink-600 text-pink-600"> <rect x="30" y="150" width="150" height="80" rx="10" fill="currentColor" stroke="none" stroke-width="2"></rect> <text x="75" y="195" fill="white">react.js</text> </g> <g class="dark:text-blue-600 text-blue-600" style="opacity:0" :style="{animation: shown && 'fade-in-3 800ms ease-in 800ms forwards'}"> <rect x="280" y="75" width="180" height="80" rx="10" fill="currentColor" stroke="none" stroke-width="2"></rect> <text x="295" y="120" fill="white">dashboard.a96cdf.js</text> </g> <line x1="100" y1="90" x2="100" y2="140" stroke="currentColor" class="dark:text-green-400 text-green-600" stroke-width="2" marker-end="url(#arrow-green)"></line> </g> </svg> </div> <div class="dark:text-indigo-300 font-medium lg:text-xl text-gray-600 text-lg"> <p class="mb-4">Parcel automatically includes content hashes in the names of all output files. This enables <strong class="dark:text-indigo-100 font-semibold text-gray-800">long-term browser caching</strong>, because the output is guaranteed not to change unless the name does.</p> <p class="lg:text-lg text-base">Parcel also resolves all referenced bundles relative to their parent using a manifest in each entry. This means that changes to referenced bundles don't invalidate the cache for their parents as well, and output files can be moved between locations without rebuilding.</p> <a class="block dark:text-green-400 font-medium hover:underline mt-8 text-green-700 text-lg" href="/features/production/#content-hashing">Learn more →</a> </div> </div> </section> </div> </section> <section aria-labelledby="targets" class="my-40 relative"> <div class="-skew-y-6 -translate-y-28 absolute bg-gradient-to-r dark:from-gray-900 dark:to-gray-800 from-gray-50 to-white top-0 transform" style="z-index:-1;width:100vw;height:calc(100% + 10rem);left:calc(-1*env(safe-area-inset-left))"></div> <div role="presentation" class="max-w-screen-xl md:px-8 mx-auto px-6"> <h3 id="targets" class="bg-clip-text bg-gradient-to-r dark:to-yellow-400 font-extrabold from-purple-500 inline-block lg:pb-8 lg:text-6xl pb-4 text-4xl text-transparent to-yellow-500 via-pink-500">Ship for any target.</h3> <p class="dark:text-gray-400 font-medium lg:text-3xl max-w-5xl text-gray-500 text-xl">Parcel automatically transforms your code for your target environments. From modern and legacy browser support, to zero config JSX and TypeScript compilation, Parcel makes it easy to build for any target – or many!</p> <div class="gap-5 grid grid-cols-2 mt-10"> <section class="bg-gradient-to-br col-span-2 dark:from-purple-900 dark:to-purple-900 from-purple-50 md:p-10 p-5 rounded-xl to-purple-100"> <h4 class="dark:text-pink-400 font-semibold mb-4 md:mb-8 text-pink-600 text-xl">Transpilation</h4> <div class="gap-x-4 gap-y-8 grid lg:gap-12 lg:grid-cols-2"> <div class="dark:text-purple-300 font-medium lg:text-xl text-gray-600 text-lg"> <p class="mb-4">Parcel transpiles your JavaScript and CSS for your target browsers automatically! Just declare a <code class="dark:text-gray-200 font-semibold text-gray-800">browserslist</code> in your <code class="dark:text-gray-200 text-gray-800">package.json</code>, and Parcel takes care of transpiling only what's needed.</p> <p class="lg:text-lg mb-4 text-base">In addition to standard JavaScript, Parcel automatically handles <strong class="dark:text-gray-200 font-semibold text-gray-800">JSX</strong>, <strong class="dark:text-gray-200 font-semibold text-gray-800">TypeScript</strong>, and <strong class="dark:text-gray-200 font-semibold text-gray-800">Flow</strong>, along with Node.js features like <strong class="dark:text-gray-200 font-semibold text-gray-800">process.env</strong> and <strong class="dark:text-gray-200 font-semibold text-gray-800">fs.readFileSync</strong> – no configuration needed!</p> <p class="lg:text-lg mb-4 text-base">When it comes to CSS, Parcel supports transpiling modern syntax features like <code class="dark:text-gray-200 font-semibold text-gray-800">lab()</code> colors, logical properties, and CSS nesting syntax, as well as automatically adding the necessary vendor prefixes for your browser targets.</p> <p class="lg:text-lg text-base">And if you need more advanced control, or support for custom transforms, just add a <code class="dark:text-gray-200 font-semibold text-gray-800">.babelrc</code> or <code class="dark:text-gray-200 font-semibold text-gray-800">.postcssrc</code> and it'll be picked up automatically.</p> <a class="block dark:text-pink-400 font-medium hover:underline mt-8 text-lg text-pink-700" href="/languages/javascript/#transpilation">Learn more →</a> </div> <div class="lg:max-w-full max-w-md mx-auto w-full"> <pre class="lg:text-sm mb-2 overflow-auto text-xs whitespace-pre-wrap"><code class="language-jsx"><span class="keyword token">function</span> <span class="function token">DogName</span><span class="punctuation token">(</span><span class="parameter token">props</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="punctuation token">(</span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span><span class="punctuation token">></span></span><span class="plain-text token"> </span><span class="punctuation token">{</span>props<span class="punctuation token">.</span>dog<span class="operator token">?.</span>name <span class="operator token">??</span> <span class="string token">'Buddy'</span><span class="punctuation token">}</span><span class="plain-text token"> </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> <span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span></code></pre> <svg height="35" width="100%" viewbox="0 0 13 35"> <line x1="0" y1="0" x2="0" y2="30" stroke="currentColor" class="dark:text-green-400 text-green-600" stroke-width="2" marker-end="url(#arrow-green)"></line> </svg> <pre class="lg:text-sm mt-2 overflow-auto text-xs whitespace-pre-wrap"><code class="language-javascript"><span class="keyword token">function</span> <span class="function token">DogName</span><span class="punctuation token">(</span><span class="parameter token">props</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">var</span> ref<span class="punctuation token">,</span> ref1<span class="punctuation token">;</span> <span class="keyword token">return</span> <span class="comment token">/*#__PURE__*/</span> React<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span> <span class="string token">"span"</span><span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">,</span> <span class="punctuation token">(</span>ref1 <span class="operator token">=</span> <span class="punctuation token">(</span>ref <span class="operator token">=</span> props<span class="punctuation token">.</span>dog<span class="punctuation token">)</span> <span class="operator token">===</span> <span class="keyword token">null</span> <span class="operator token">||</span> ref <span class="operator token">===</span> <span class="keyword token">void</span> <span class="number token">0</span> <span class="operator token">?</span> <span class="keyword token">void</span> <span class="number token">0</span> <span class="operator token">:</span> ref<span class="punctuation token">.</span>name<span class="punctuation token">)</span> <span class="operator token">!==</span> <span class="keyword token">null</span> <span class="operator token">&&</span> ref1 <span class="operator token">!==</span> <span class="keyword token">void</span> <span class="number token">0</span> <span class="operator token">?</span> ref1 <span class="operator token">:</span> <span class="string token">"Buddy"</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span></code></pre> </div> </div> </section> <section class="bg-gradient-to-tl col-span-2 dark:from-pink-900 dark:to-purple-900 from-pink-200 md:col-span-1 md:p-10 p-5 rounded-xl to-purple-100" style="background-position:0 0;background-size:200% 100%"> <h4 class="dark:text-pink-400 font-semibold mb-4 md:mb-8 text-pink-600 text-xl">Differential bundling</h4> <div class="flex flex-col"> <div class="dark:text-purple-300 font-medium lg:text-xl text-gray-600 text-lg"> <p>When you use <code class="dark:text-purple-100 font-semibold text-gray-800"><script type="module"></code>, Parcel automatically generates a <code class="dark:text-purple-100 font-semibold text-gray-800">nomodule</code> fallback for old browsers as well, depending on your browser targets.</p> <p class="lg:text-lg mt-4 text-base">This results in <strong class="dark:text-purple-100 font-semibold text-gray-800">much smaller bundles</strong> for a majority of users in modern browsers, while still supporting older browsers as well!</p> <a class="block dark:text-pink-400 font-medium hover:underline mt-8 text-lg text-pink-700" href="/features/targets/#differential-bundling">Learn more →</a> </div> <div class="max-w-md mt-8 mx-auto w-full"> <pre class="lg:text-sm mb-4 overflow-auto text-xs"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>module<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>app.js<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> <svg height="35" width="100%" viewbox="0 0 13 35"> <line x1="0" y1="0" x2="0" y2="30" stroke="currentColor" class="dark:text-green-400 text-green-600" stroke-width="2" marker-end="url(#arrow-green)"></line> </svg> <pre class="mt-4 overflow-auto text-xs"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>module<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>app.c9a6fe.js<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">nomodule</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span><span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="attr-equals punctuation token">=</span><span class="punctuation token">"</span>app.f7d631.js<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="script token"></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> </div> </div> </section> <section class="bg-gradient-to-tl col-span-2 dark:from-pink-900 dark:to-purple-900 from-pink-200 md:col-span-1 md:p-10 p-5 rounded-xl to-purple-100" style="background-position:100% 0;background-size:200% 100%"> <h4 class="dark:text-pink-400 font-semibold mb-4 md:mb-8 text-pink-600 text-xl">Workers</h4> <div class="flex flex-col"> <div class="dark:text-purple-300 font-medium lg:text-xl mb-8 text-gray-600 text-lg"> <p class="mb-4">Parcel supports <strong class="dark:text-purple-100 font-semibold text-gray-800">web workers</strong>, <strong class="dark:text-purple-100 font-semibold text-gray-800">service workers</strong>, and <strong class="dark:text-purple-100 font-semibold text-gray-800">worklets</strong> out of the box! Just use the standard browser APIs and Parcel will automatically follow the dependency.</p> <p class="lg:text-lg text-base">It even generates <strong class="dark:text-purple-100 font-semibold text-gray-800">native ES module workers</strong> when possible, depending on your browser targets!</p> <a class="block dark:text-pink-400 font-medium hover:underline mt-8 text-lg text-pink-700" href="/languages/javascript/#workers">Learn more →</a> </div> <div x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false" class="bg-gray-800 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out flex flex-col overflow-hidden rounded-md self-center shadow-xl sm:w-auto text-black transition w-full-screen" :class="{'translate-y-0 opacity-100': shown, 'motion-safe:translate-y-3 opacity-70': !shown}"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center mb-4 p-2 relative"> <div class="absolute flex flex-row left-2 top-2"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="lg:ml-0 md:ml-5 ml-0 text-gray-500 text-xs">App.js</div> </div> <pre class="bg-transparent flex-grow lg:text-base md:text-sm overflow-auto pt-0 text-xs"><code class="language-js md:text-sm text-xs"><span class="keyword token">let</span> worker <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Worker</span><span class="punctuation token">(</span> <span class="keyword token">new</span> <span class="class-name token">URL</span><span class="punctuation token">(</span><span class="string token">'./worker.js'</span><span class="punctuation token">,</span> <span class="keyword token">import</span><span class="punctuation token">.</span>meta<span class="punctuation token">.</span>url<span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="punctuation token">{</span><span class="literal-property property token">type</span><span class="operator token">:</span> <span class="string token">'module'</span><span class="punctuation token">}</span> <span class="punctuation token">)</span><span class="punctuation token">;</span> navigator<span class="punctuation token">.</span>serviceWorker<span class="punctuation token">.</span><span class="function token">register</span><span class="punctuation token">(</span> <span class="keyword token">new</span> <span class="class-name token">URL</span><span class="punctuation token">(</span><span class="string token">'./sw.js'</span><span class="punctuation token">,</span> <span class="keyword token">import</span><span class="punctuation token">.</span>meta<span class="punctuation token">.</span>url<span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="punctuation token">{</span><span class="literal-property property token">type</span><span class="operator token">:</span> <span class="string token">'module'</span><span class="punctuation token">}</span> <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre></div> </div> </section> <section class="bg-gradient-to-bl col-span-2 dark:from-pink-900 dark:to-purple-700 from-pink-200 md:p-10 p-5 rounded-xl to-yellow-100" style="background-position:100% 0;background-size:200% 200%"> <h4 class="dark:text-pink-400 font-semibold mb-4 md:mb-8 text-pink-600 text-xl">Libraries</h4> <div class="gap-x-4 gap-y-8 grid lg:gap-12 lg:grid-cols-3"> <div class="dark:text-pink-300 flex flex-col font-medium lg:col-span-2 lg:text-xl text-gray-600 text-lg"> <p class="mb-4"><strong class="dark:text-pink-100 font-semibold text-gray-800">Parcel can build libraries for multiple targets at once!</strong> For example, your source code can be compiled to a modern ES module, a legacy CommonJS module, and a TypeScript definition file all automatically. Just add the relevant fields to your <code class="dark:text-pink-100 text-gray-800">package.json</code> and Parcel takes care of the rest.</p> <p class="flex-grow">You can even build a whole monorepo of packages in a single command! 🤯 <code class="dark:text-pink-100 font-semibold text-gray-800">parcel build packages/*</code></p> <a class="block dark:text-pink-300 font-medium hover:underline mt-8 text-lg text-pink-700" href="/getting-started/library/">Learn more →</a> </div> <div x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false" class="bg-gray-800 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out overflow-hidden rounded-md shadow-xl text-black transition" :class="{'translate-y-0 opacity-100': shown, 'motion-safe:translate-y-3 opacity-70': !shown}"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center mb-4 p-2 relative"> <div class="absolute flex flex-row left-2 top-2"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="lg:ml-0 md:ml-5 ml-0 text-gray-500 text-xs">package.json</div> </div> <pre class="bg-transparent pt-0"><code class="language-json lg:text-base text-sm"><span class="punctuation token">{</span> <span class="property token">"name"</span><span class="operator token">:</span> <span class="string token">"my-great-library"</span><span class="punctuation token">,</span> <span class="property token">"version"</span><span class="operator token">:</span> <span class="string token">"1.0.0"</span><span class="punctuation token">,</span> <span class="property token">"source"</span><span class="operator token">:</span> <span class="string token">"src/index.js"</span><span class="punctuation token">,</span> <span class="property token">"module"</span><span class="operator token">:</span> <span class="string token">"dist/module.js"</span><span class="punctuation token">,</span> <span class="property token">"main"</span><span class="operator token">:</span> <span class="string token">"dist/main.js"</span><span class="punctuation token">,</span> <span class="property token">"types"</span><span class="operator token">:</span> <span class="string token">"dist/types.d.ts"</span> <span class="punctuation token">}</span></code></pre> </div> </div> </section> </div> </div> </section> <section aria-labelledby="scalability" class="max-w-screen-xl md:px-8 mt-40 mx-auto px-6"> <h3 id="scalability" class="bg-clip-text bg-gradient-to-r dark:via-yellow-400 font-extrabold from-pink-600 inline-block lg:text-6xl max-w-6xl mb-8 text-4xl text-transparent to-pink-600 via-yellow-500">Scalable from small websites to massive applications.</h3> <p class="dark:text-gray-400 font-medium lg:text-3xl max-w-5xl text-gray-500 text-xl">Parcel requires zero configuration to get started. But as your application grows and your build requirements become more complex, it's possible to extend Parcel in just about every way.</p> <div class="gap-5 grid grid-cols-4 mt-10"> <section class="bg-gradient-to-tr col-span-4 dark:from-pink-900 dark:to-orange-800 dark:via-pink-900 from-orange-100 md:p-10 p-5 rounded-xl to-rose-100"> <h4 class="dark:text-orange-300 font-semibold mb-4 text-orange-700 text-xl">Simple configuration?!</h4> <div class="gap-x-4 gap-y-8 grid grid-cols-1 lg:grid-cols-2" x-data="{'tab': 'extends'}"> <div class="lg:col-span-2"> <p class="dark:text-orange-200 font-medium lg:text-xl max-w-4xl mb-4 text-gray-600 text-lg">Configuring Parcel is like a breath of fresh air. <code class="dark:text-orange-100 font-semibold text-gray-800">.parcelrc</code> is a simple JSON-based config format that uses globs to match your source files to build pipelines. You can extend the default config and add plugins to handle custom file types, or override and extend the defaults.</p> <a class="block dark:text-orange-300 font-medium hover:underline text-lg text-orange-700" href="/features/plugins/">Learn more →</a> </div> <div class="lg:order-1 order-2" role="radiogroup"> <div role="radio" :aria-checked="tab === 'extends'" @click="tab = 'extends'" @mouseover="tab = 'extends'"> <p class="font-semibold">Extends</p> <p class="text-base">Start with the default config, or a community preset.</p> </div> <div role="radio" :aria-checked="tab === 'transformers'" @click="tab = 'transformers'" @mouseover="tab = 'transformers'"> <p class="font-semibold">Transformers</p> <p class="text-base">Compile individual source files and extract dependencies.</p> </div> <div role="radio" :aria-checked="tab === 'resolvers'" @click="tab = 'resolvers'" @mouseover="tab = 'resolvers'"> <p class="font-semibold">Resolvers</p> <p class="text-base">Resolve a dependency to a file path or virtual module.</p> </div> <div role="radio" :aria-checked="tab === 'namers'" @click="tab = 'namers'" @mouseover="tab = 'namers'"> <p class="font-semibold">Namers</p> <p class="text-base">Determine the name of an output file.</p> </div> <div role="radio" :aria-checked="tab === 'packagers'" @click="tab = 'packagers'" @mouseover="tab = 'packagers'"> <p class="font-semibold">Packagers</p> <p class="text-base">Combine multiple assets together into a single output file.</p> </div> <div role="radio" :aria-checked="tab === 'optimizers'" @click="tab = 'optimizers'" @mouseover="tab = 'optimizers'"> <p class="font-semibold">Optimizers</p> <p class="text-base">Minify, optimize, and transform output files.</p> </div> <div role="radio" :aria-checked="tab === 'compressors'" @click="tab = 'compressors'" @mouseover="tab = 'compressors'"> <p class="font-semibold">Compressors</p> <p class="text-base">Compress and encode output files in multiple formats.</p> </div> <div role="radio" :aria-checked="tab === 'reporters'" @click="tab = 'reporters'" @mouseover="tab = 'reporters'"> <p class="font-semibold">Reporters</p> <p class="text-base">Receive events on build progress and completion.</p> </div> </div> <div x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false" class="bg-gray-800 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out flex flex-col justify-self-center lg:order-2 max-w-full-screen order-1 overflow-hidden rounded-md shadow-xl text-black transition" :class="{'translate-y-0 opacity-100': shown, 'motion-safe:translate-y-3 opacity-70': !shown}"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center mb-4 p-2 relative"> <div class="absolute flex flex-row left-2 top-2"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="lg:ml-0 md:ml-5 ml-0 text-gray-500 text-xs">.parcelrc</div> </div> <pre class="bg-transparent flex-grow lg:text-base md:text-sm overflow-auto pt-0 text-xs">{ <code class="code-plugin language-json" id="plugin-extends" :class="{'inactive': tab && tab !== 'extends'}"> <span class="property token">"extends"</span><span class="operator token">:</span> <span class="punctuation token">[</span><span class="string token">"@parcel/config-default"</span><span class="punctuation token">]</span><span class="punctuation token">,</span></code> <code class="code-plugin language-json" id="plugin-transformers" :class="{'inactive': tab && tab !== 'transformers'}"> <span class="property token">"transformers"</span><span class="operator token">:</span> <span class="punctuation token">{</span> <span class="property token">"*.svg"</span><span class="operator token">:</span> <span class="punctuation token">[</span><span class="string token">"@parcel/transformer-svg-react"</span><span class="punctuation token">]</span> <span class="punctuation token">}</span><span class="punctuation token">,</span></code> <code class="code-plugin language-json" id="plugin-resolvers" :class="{'inactive': tab && tab !== 'resolvers'}"> <span class="property token">"resolvers"</span><span class="operator token">:</span> <span class="punctuation token">[</span><span class="string token">"@parcel/resolver-glob"</span><span class="punctuation token">,</span> <span class="string token">"..."</span><span class="punctuation token">]</span><span class="punctuation token">,</span></code> <code class="code-plugin language-json" id="plugin-namers" :class="{'inactive': tab && tab !== 'namers'}"> <span class="property token">"namers"</span><span class="operator token">:</span> <span class="punctuation token">[</span><span class="string token">"@company/parcel-namer"</span><span class="punctuation token">,</span> <span class="string token">"..."</span><span class="punctuation token">]</span><span class="punctuation token">,</span></code> <code class="code-plugin language-json" id="plugin-packagers" :class="{'inactive': tab && tab !== 'packagers'}"> <span class="property token">"packagers"</span><span class="operator token">:</span> <span class="punctuation token">{</span> <span class="property token">"*.{jpg,png}"</span><span class="operator token">:</span> <span class="string token">"parcel-packager-image-sprite"</span> <span class="punctuation token">}</span><span class="punctuation token">,</span></code> <code class="code-plugin language-json" id="plugin-optimizers" :class="{'inactive': tab && tab !== 'optimizers'}"> <span class="property token">"optimizers"</span><span class="operator token">:</span> <span class="punctuation token">{</span> <span class="property token">"*.js"</span><span class="operator token">:</span> <span class="punctuation token">[</span><span class="string token">"parcel-optimizer-license-headers"</span><span class="punctuation token">]</span> <span class="punctuation token">}</span><span class="punctuation token">,</span></code> <code class="code-plugin language-json" id="plugin-compressors" :class="{'inactive': tab && tab !== 'compressors'}"> <span class="property token">"compressors"</span><span class="operator token">:</span> <span class="punctuation token">{</span> <span class="property token">"*.js"</span><span class="operator token">:</span> <span class="punctuation token">[</span><span class="string token">"..."</span><span class="punctuation token">,</span> <span class="string token">"@parcel/compressor-gzip"</span><span class="punctuation token">]</span> <span class="punctuation token">}</span><span class="punctuation token">,</span></code> <code class="code-plugin language-json" id="plugin-reporters" :class="{'inactive': tab && tab !== 'reporters'}"> <span class="property token">"reporters"</span><span class="operator token">:</span> <span class="punctuation token">[</span><span class="string token">"..."</span><span class="punctuation token">,</span> <span class="string token">"parcel-reporter-manifest"</span><span class="punctuation token">]</span></code> }</pre> <style>code.code-plugin *{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke!important;transition-duration:.15s!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}@media (min-width:1024px){code.inactive *{--tw-text-opacity:1!important;color:rgb(75 85 99/var(--tw-text-opacity))!important}}</style> </div> </div> </section> <section class="bg-gradient-to-tl col-span-4 dark:from-orange-800 dark:to-pink-800 from-orange-300 md:p-10 p-5 rounded-xl to-rose-100"> <h4 class="dark:text-orange-300 font-semibold mb-4 text-orange-700 text-xl">Powerful plugins</h4> <div class="gap-y-8 grid grid-cols-12 lg:gap-x-8" x-data="{'tab': 'transformer'}"> <div x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false" class="bg-gray-800 border border-gray-200 border-solid col-span-12 dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out flex flex-col h-128 justify-self-center lg:col-span-7 lg:h-auto max-w-full-screen md:w-full overflow-hidden rounded-md shadow-xl text-black transition" :class="{'translate-y-0 opacity-100': shown, 'motion-safe:translate-y-3 opacity-70': !shown}"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center p-2 relative"> <div class="absolute flex flex-row left-2 top-2"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="cursor-default lg:ml-0 md:ml-5 ml-0 select-none text-gray-500 text-xs" x-text="document.querySelector(`#${tab}-tab`).textContent" aria-hidden="true">Transformer.js</div> </div> <div role="tablist" class="bg-gray-400 border-b border-gray-300 dark:bg-gray-900 dark:border-gray-800 flex flex-row overflow-auto"> <div role="tab" aria-controls="transformer-tabpanel" id="transformer-tab" :aria-selected="tab === 'transformer'" @click="tab = 'transformer'">Transformer.js</div> <div role="tab" aria-controls="resolver-tabpanel" id="resolver-tab" :aria-selected="tab === 'resolver'" @click="tab = 'resolver'">Resolver.js</div> <div role="tab" aria-controls="namer-tabpanel" id="namer-tab" :aria-selected="tab === 'namer'" @click="tab = 'namer'">Namer.js</div> <div role="tab" aria-controls="packager-tabpanel" id="packager-tab" :aria-selected="tab === 'packager'" @click="tab = 'packager'">Packager.js</div> <div role="tab" aria-controls="optimizer-tabpanel" id="optimizer-tab" :aria-selected="tab === 'optimizer'" @click="tab = 'optimizer'">Optimizer.js</div> <div role="tab" aria-controls="compressor-tabpanel" id="compressor-tab" :aria-selected="tab === 'compressor'" @click="tab = 'compressor'">Compressor.js</div> <div role="tab" aria-controls="reporter-tabpanel" id="reporter-tab" :aria-selected="tab === 'reporter'" @click="tab = 'reporter'">Reporter.js</div> </div> <pre role="tabpanel" id="transformer-tabpanel" aria-labelledby="transformer-tab" x-show="tab === 'transformer'" class="bg-transparent flex-1 mt-4 overflow-auto pt-0"><code class="language-js lg:text-sm text-xs"><span class="keyword token">import</span> <span class="punctuation token">{</span>Transformer<span class="punctuation token">}</span> <span class="keyword token">from</span> <span class="string token">'@parcel/plugin'</span><span class="punctuation token">;</span> <span class="keyword token">export</span> <span class="keyword token">default</span> <span class="keyword token">new</span> <span class="class-name token">Transformer</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="keyword token">async</span> <span class="function token">transform</span><span class="punctuation token">(</span><span class="parameter token"><span class="punctuation token">{</span>asset<span class="punctuation token">}</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">let</span> source <span class="operator token">=</span> <span class="keyword token">await</span> asset<span class="punctuation token">.</span><span class="function token">getCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="keyword token">let</span> sourceMap <span class="operator token">=</span> <span class="keyword token">await</span> asset<span class="punctuation token">.</span><span class="function token">getMap</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="keyword token">let</span> <span class="punctuation token">{</span>code<span class="punctuation token">,</span> map<span class="punctuation token">}</span> <span class="operator token">=</span> <span class="function token">compile</span><span class="punctuation token">(</span>source<span class="punctuation token">,</span> sourceMap<span class="punctuation token">)</span><span class="punctuation token">;</span> asset<span class="punctuation token">.</span><span class="function token">setCode</span><span class="punctuation token">(</span>code<span class="punctuation token">)</span><span class="punctuation token">;</span> asset<span class="punctuation token">.</span><span class="function token">setMap</span><span class="punctuation token">(</span>map<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="keyword token">return</span> <span class="punctuation token">[</span>asset<span class="punctuation token">]</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <pre role="tabpanel" id="resolver-tabpanel" aria-labelledby="resolver-tab" x-show="tab === 'resolver'" class="bg-transparent flex-1 mt-4 overflow-auto pt-0" style="display:none"><code class="language-js lg:text-sm text-xs"><span class="keyword token">import</span> <span class="punctuation token">{</span>Resolver<span class="punctuation token">}</span> <span class="keyword token">from</span> <span class="string token">'@parcel/plugin'</span><span class="punctuation token">;</span> <span class="keyword token">import</span> path <span class="keyword token">from</span> <span class="string token">'path'</span><span class="punctuation token">;</span> <span class="keyword token">export</span> <span class="keyword token">default</span> <span class="keyword token">new</span> <span class="class-name token">Resolver</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="keyword token">async</span> <span class="function token">resolve</span><span class="punctuation token">(</span><span class="parameter token"><span class="punctuation token">{</span>specifier<span class="punctuation token">}</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>specifier <span class="operator token">===</span> <span class="string token">'special-module'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="punctuation token">{</span> <span class="literal-property property token">filePath</span><span class="operator token">:</span> path<span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span>__dirname<span class="punctuation token">,</span> <span class="string token">'special-module.js'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="literal-property property token">code</span><span class="operator token">:</span> <span class="string token">'export default "This is a special module!";'</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> <span class="punctuation token">}</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <pre role="tabpanel" id="namer-tabpanel" aria-labelledby="namer-tab" x-show="tab === 'namer'" class="bg-transparent flex-1 mt-4 overflow-auto pt-0" style="display:none"><code class="language-js lg:text-sm text-xs"><span class="keyword token">import</span> <span class="punctuation token">{</span>Namer<span class="punctuation token">}</span> <span class="keyword token">from</span> <span class="string token">'@parcel/plugin'</span><span class="punctuation token">;</span> <span class="keyword token">import</span> path <span class="keyword token">from</span> <span class="string token">'path'</span><span class="punctuation token">;</span> <span class="keyword token">export</span> <span class="keyword token">default</span> <span class="keyword token">new</span> <span class="class-name token">Namer</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="function token">name</span><span class="punctuation token">(</span><span class="parameter token"><span class="punctuation token">{</span>bundle<span class="punctuation token">}</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>bundle<span class="punctuation token">.</span>type <span class="operator token">===</span> <span class="string token">'png'</span> <span class="operator token">||</span> bundle<span class="punctuation token">.</span>type <span class="operator token">===</span> <span class="string token">'jpg'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">let</span> filePath <span class="operator token">=</span> bundle<span class="punctuation token">.</span><span class="function token">getMainEntry</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span>filePath<span class="punctuation token">;</span> <span class="keyword token">return</span> `images<span class="operator token">/</span>$<span class="punctuation token">{</span>path<span class="punctuation token">.</span><span class="function token">basename</span><span class="punctuation token">(</span>filePath<span class="punctuation token">)</span>`<span class="punctuation token">;</span> <span class="punctuation token">}</span> <span class="punctuation token">}</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <pre role="tabpanel" id="packager-tabpanel" aria-labelledby="packager-tab" x-show="tab === 'packager'" class="bg-transparent flex-1 mt-4 overflow-auto pt-0" style="display:none"><code class="language-js lg:text-sm text-xs"><span class="keyword token">import</span> <span class="punctuation token">{</span>Packager<span class="punctuation token">}</span> <span class="keyword token">from</span> <span class="string token">'@parcel/plugin'</span><span class="punctuation token">;</span> <span class="keyword token">export</span> <span class="keyword token">default</span> <span class="keyword token">new</span> <span class="class-name token">Packager</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="keyword token">async</span> <span class="keyword token">package</span><span class="punctuation token">(</span><span class="punctuation token">{</span>bundle<span class="punctuation token">}</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">let</span> promises <span class="operator token">=</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">;</span> bundle<span class="punctuation token">.</span><span class="function token">traverseAssets</span><span class="punctuation token">(</span><span class="parameter token">asset</span> <span class="operator token">=></span> <span class="punctuation token">{</span> promises<span class="punctuation token">.</span><span class="function token">push</span><span class="punctuation token">(</span>asset<span class="punctuation token">.</span><span class="function token">getCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="keyword token">let</span> contents <span class="operator token">=</span> <span class="keyword token">await</span> Promise<span class="punctuation token">.</span><span class="function token">all</span><span class="punctuation token">(</span>promises<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="keyword token">return</span> <span class="punctuation token">{</span> <span class="literal-property property token">contents</span><span class="operator token">:</span> contents<span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span><span class="string token">'\n'</span><span class="punctuation token">)</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <pre role="tabpanel" id="optimizer-tabpanel" aria-labelledby="optimizer-tab" x-show="tab === 'optimizer'" class="bg-transparent flex-1 mt-4 overflow-auto pt-0" style="display:none"><code class="language-js lg:text-sm text-xs"><span class="keyword token">import</span> <span class="punctuation token">{</span>Optimizer<span class="punctuation token">}</span> <span class="keyword token">from</span> <span class="string token">'@parcel/plugin'</span><span class="punctuation token">;</span> <span class="keyword token">export</span> <span class="keyword token">default</span> <span class="keyword token">new</span> <span class="class-name token">Optimizer</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="keyword token">async</span> <span class="function token">optimize</span><span class="punctuation token">(</span><span class="parameter token"><span class="punctuation token">{</span>contents<span class="punctuation token">,</span> map<span class="punctuation token">}</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">let</span> <span class="punctuation token">{</span>code<span class="punctuation token">,</span> sourceMap<span class="punctuation token">}</span> <span class="operator token">=</span> <span class="function token">optimize</span><span class="punctuation token">(</span>contents<span class="punctuation token">,</span> map<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="keyword token">return</span> <span class="punctuation token">{</span> <span class="literal-property property token">contents</span><span class="operator token">:</span> code<span class="punctuation token">,</span> <span class="literal-property property token">map</span><span class="operator token">:</span> sourceMap <span class="punctuation token">}</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <pre role="tabpanel" id="compressor-tabpanel" aria-labelledby="compressor-tab" x-show="tab === 'compressor'" class="bg-transparent flex-1 mt-4 overflow-auto pt-0" style="display:none"><code class="language-js lg:text-sm text-xs"><span class="keyword token">import</span> <span class="punctuation token">{</span>Compressor<span class="punctuation token">}</span> <span class="keyword token">from</span> <span class="string token">'@parcel/plugin'</span><span class="punctuation token">;</span> <span class="keyword token">export</span> <span class="keyword token">default</span> <span class="keyword token">new</span> <span class="class-name token">Compressor</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="keyword token">async</span> <span class="function token">compress</span><span class="punctuation token">(</span><span class="parameter token"><span class="punctuation token">{</span>stream<span class="punctuation token">}</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> <span class="punctuation token">{</span> <span class="literal-property property token">stream</span><span class="operator token">:</span> <span class="function token">gzipStream</span><span class="punctuation token">(</span>stream<span class="punctuation token">)</span><span class="punctuation token">,</span> <span class="literal-property property token">type</span><span class="operator token">:</span> <span class="string token">'gz'</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <pre role="tabpanel" id="reporter-tabpanel" aria-labelledby="reporter-tab" x-show="tab === 'reporter'" class="bg-transparent flex-1 mt-4 overflow-auto pt-0" style="display:none"><code class="language-js lg:text-sm text-xs"><span class="keyword token">import</span> <span class="punctuation token">{</span>Reporter<span class="punctuation token">}</span> <span class="keyword token">from</span> <span class="string token">'@parcel/plugin'</span><span class="punctuation token">;</span> <span class="keyword token">export</span> <span class="keyword token">default</span> <span class="keyword token">new</span> <span class="class-name token">Reporter</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="function token">report</span><span class="punctuation token">(</span><span class="parameter token"><span class="punctuation token">{</span>event<span class="punctuation token">}</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>event<span class="punctuation token">.</span>type <span class="operator token">===</span> <span class="string token">'buildSuccess'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">let</span> bundles <span class="operator token">=</span> event<span class="punctuation token">.</span>bundleGraph<span class="punctuation token">.</span><span class="function token">getBundles</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> process<span class="punctuation token">.</span>stdout<span class="punctuation token">.</span><span class="function token">write</span><span class="punctuation token">(</span><span class="template-string token"><span class="string template-punctuation token">`</span><span class="string token">✨ Built </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>bundles<span class="punctuation token">.</span>length<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> bundles in </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>event<span class="punctuation token">.</span>buildTime<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">ms!\n</span><span class="string template-punctuation token">`</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> <span class="punctuation token">}</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> </div> <div class="col-span-12 dark:text-orange-200 lg:col-span-5 text-gray-700"> <p class="font-medium lg:text-xl max-w-4xl mb-4 text-lg">Parcel has a plugin for everything. In fact, Parcel core is <strong class="dark:text-orange-300 font-semibold text-gray-900">completely language agnostic</strong>! From transforming files, to resolving dependencies, to bundling and optimizing – everything is customizable.</p> <p class="font-medium lg:text-lg mb-4 text-base">Each plugin type has a specific, well defined API designed for its purpose. All objects and methods are <strong class="dark:text-orange-300 font-semibold text-gray-900">fully documented, and include TypeScript definitions</strong> for autocomplete and type safety.</p> <p class="font-medium lg:text-lg mb-4 text-base">As you're developing a plugin, it even hot reloads as you save without needing to re-run your build from scratch! This makes it super fast to debug and iterate. It even works with dependencies in <code>node_modules</code>!</p> <a class="block dark:text-orange-300 font-medium hover:underline mt-10 text-lg text-orange-800" href="/plugin-system/authoring-plugins/">Learn more →</a> </div> </div> </section> <section class="bg-gradient-to-bl col-span-4 dark:from-rose-800 dark:to-purple-800 from-orange-300 md:p-10 p-5 rounded-xl row-span-2 to-rose-100 xl:col-span-2"> <h4 class="dark:text-orange-300 font-semibold mb-4 text-orange-700 text-xl">Named pipelines</h4> <div class="flex flex-col"> <div class="dark:text-pink-200 font-medium lg:text-xl text-gray-700 text-lg"> <p class="mb-4">Want to transform the same types of files in multiple ways in a single build? Create a named pipeline, and use it as a URL scheme in your code.</p> <p class="lg:text-lg mb-8 text-base">For example, you could inline the compiled contents of a bundle as text, a data URL, an ArrayBuffer, or anything else! Or if you're building a documentation site, you could import both the generated API docs and source code for a file. The possibilities are endless.</p> <a class="block dark:text-orange-300 font-medium hover:underline mb-8 text-lg text-orange-800" href="/features/plugins/#named-pipelines">Learn more →</a> </div> <div class="max-w-full-screen self-center" x-data="{shown: false}" x-intersect:enter="shown = true" x-intersect:leave="shown = false"> <div class="bg-gray-800 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out mr-10 overflow-hidden rounded-md shadow-xl text-black transition" :class="{'translate-y-0 translate-x-0 opacity-100': shown, 'motion-safe:-translate-y-3 motion-safe:-translate-x-3 opacity-70': !shown}"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center mb-4 p-2 relative"> <div class="absolute flex flex-row left-2 top-2"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="lg:ml-0 md:ml-5 ml-0 text-gray-500 text-xs">.parcelrc</div> </div> <pre class="bg-transparent overflow-auto pt-0"><code class="language-json lg:text-sm text-xs"><span class="punctuation token">{</span> <span class="property token">"extends"</span><span class="operator token">:</span> <span class="string token">"@parcel/config-default"</span><span class="punctuation token">,</span> <span class="property token">"transformers"</span><span class="operator token">:</span> <span class="punctuation token">{</span> <span class="property token">"buffer:*"</span><span class="operator token">:</span> <span class="punctuation token">[</span><span class="string token">"..."</span><span class="punctuation token">,</span> <span class="string token">"parcel-transformer-buffer"</span><span class="punctuation token">]</span> <span class="punctuation token">}</span> <span class="punctuation token">}</span></code></pre> </div> <div class="-mt-10 bg-gray-800 border border-gray-200 border-solid dark:bg-gray-900 dark:border-gray-700 dark:text-white delay-100 duration-700 ease-out ml-20 overflow-hidden rounded-md shadow-xl text-black transition" :class="{'translate-y-0 translate-x-0 opacity-100': shown, 'motion-safe:translate-y-3 motion-safe:translate-x-3 opacity-70': !shown}"> <div class="bg-gray-200 dark:bg-gray-800 flex flex-row justify-center mb-4 p-2 relative"> <div class="absolute flex flex-row left-2 top-2"> <div class="bg-red-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-yellow-500 h-3 mr-2 rounded-full w-3"></div> <div class="bg-green-500 h-3 rounded-full w-3"></div> </div> <div class="lg:ml-0 md:ml-5 ml-0 text-gray-500 text-xs">App.js</div> </div> <pre class="bg-transparent overflow-auto pt-0"><code class="language-js lg:text-sm text-xs"><span class="keyword token">import</span> buffer <span class="keyword token">from</span> <span class="string token">'buffer:./logo.png'</span><span class="punctuation token">;</span></code></pre> </div> </div> </div> </section> <section class="bg-gradient-to-bl col-span-4 dark:from-orange-800 dark:to-pink-800 flex flex-col from-orange-300 md:p-10 p-5 rounded-xl to-rose-200 via-orange-200 xl:col-span-2"> <h4 class="dark:text-orange-300 font-semibold mb-4 text-orange-700 text-xl">Designed for performance</h4> <p class="dark:text-orange-100 flex-grow font-medium lg:text-xl max-w-4xl mb-8 text-gray-700 text-lg">Parcel's plugin system has been designed from the ground up with performance in mind. Plugins are automatically parallelized across multiple threads, and integrated with Parcel's cache. Any dependencies or configs your plugin uses are automatically tracked and invalidate the build.</p> <a class="block dark:text-orange-200 font-medium hover:underline text-lg text-orange-800" href="/plugin-system/authoring-plugins/">Learn more →</a> </section> <section class="bg-gradient-to-tr col-span-4 dark:from-rose-700 dark:to-pink-800 flex flex-col from-rose-300 md:p-10 p-5 rounded-xl sm:col-span-2 to-orange-300 xl:col-span-1" style="background-size:200% 100%"> <h4 class="dark:text-orange-300 font-semibold mb-4 text-orange-800 text-xl">API</h4> <p class="dark:text-orange-100 flex-grow font-medium lg:text-xl max-w-4xl mb-8 text-gray-800 text-lg">Integrate Parcel into any existing build system using Parcel's API, which allows you to perform builds programmatically.</p> <a class="block dark:text-orange-200 font-medium hover:underline text-lg text-orange-900" href="/features/parcel-api/">Learn more →</a> </section> <section class="bg-gradient-to-tr col-span-4 dark:from-rose-700 dark:to-pink-800 from-rose-300 md:p-10 p-5 rounded-xl sm:col-span-2 to-orange-300 xl:col-span-1" style="background-position:100% 0;background-size:200% 100%"> <h4 class="dark:text-orange-300 font-semibold mb-4 text-orange-800 text-xl">Diagnostics</h4> <p class="dark:text-orange-100 font-medium lg:text-xl max-w-4xl mb-8 text-gray-800 text-lg">All Parcel plugins use a unified diagnostic format that supports highlighted code frames, rich Markdown formatting, hints, and documentation links.</p> <a class="block dark:text-orange-200 font-medium hover:underline text-lg text-orange-900" href="/plugin-system/logging/">Learn more →</a> </section> </div> </section> <section class="dark:text-gray-400 font-medium lg:text-xl max-w-screen-xl md:px-8 mx-auto my-40 px-6 text-gray-500 text-lg"> <h3 id="optimization" class="bg-clip-text bg-gradient-to-r dark:from-emerald-500 dark:to-lime-500 dark:via-green-500 font-extrabold from-blue-500 inline-block lg:mb-8 lg:text-6xl mb-4 text-4xl text-transparent to-purple-500 via-indigo-500">Powered by open source.</h3> <p class="dark:text-gray-400 font-medium lg:text-3xl max-w-5xl text-gray-500 text-xl">Parcel is an open source project, powered by code and financial contributions from companies and individuals around the world.</p> <div class="gap-x-8 gap-y-12 grid grid-cols-1 max-w-5xl md:grid-cols-3 my-12"> <div> <h4 class="dark:text-green-400 font-semibold mb-2 text-blue-600 text-xl">🥇 Gold sponsors</h4> <p class="lg:text-base py-2 text-sm">Gold sponsors donate $1,000 or more per month to Parcel.</p> <div class="flex gap-2 items-center mt-2"> <object data="https://opencollective.com/parcel/tiers/gold-sponsor.svg?button=false&margin=1" title="Gold sponsors"></object> <a class="border-2 border-blue-400 dark:border-green-700 dark:hover:bg-green-900 dark:hover:border-green-500 dark:text-green-400 font-medium hover:bg-blue-100 hover:bg-opacity-25 hover:border-blue-500 px-4 py-1 rounded-full sm:w-36 text-blue-600 text-center text-sm transition-colors vert w-32" href="https://opencollective.com/parcel#support" target="_blank">Become a sponsor →</a> </div> </div> <div> <h4 class="dark:text-green-400 font-semibold mb-2 text-blue-600 text-xl">🥈 Silver sponsors</h4> <p class="lg:text-base py-2 text-sm">Silver sponsors donate $500 or more per month to Parcel.</p> <div class="flex gap-2 items-center mt-2"> <object data="https://opencollective.com/parcel/tiers/silver-sponsor.svg?button=false&margin=1" title="Silver sponsors"></object> <a class="border-2 border-blue-400 dark:border-green-700 dark:hover:bg-green-900 dark:hover:border-green-500 dark:text-green-400 font-medium hover:bg-blue-100 hover:bg-opacity-25 hover:border-blue-500 px-4 py-1 rounded-full sm:w-36 text-blue-600 text-center text-sm transition-colors vert w-32" href="https://opencollective.com/parcel#support" target="_blank">Become a sponsor →</a> </div> </div> <div> <h4 class="dark:text-green-400 font-semibold mb-2 text-blue-600 text-xl">🥉 Bronze sponsors</h4> <p class="lg:text-base py-2 text-sm">Bronze sponsors donate $100 or more per month to Parcel.</p> <div class="flex gap-2 items-center mt-2"> <object data="https://opencollective.com/parcel/tiers/bronze-sponsor.svg?button=false&margin=1" title="Bronze sponsors"></object> <a class="border-2 border-blue-400 dark:border-green-700 dark:hover:bg-green-900 dark:hover:border-green-500 dark:text-green-400 font-medium hover:bg-blue-100 hover:bg-opacity-25 hover:border-blue-500 px-4 py-1 rounded-full sm:w-36 text-blue-600 text-center text-sm transition-colors vert w-32" href="https://opencollective.com/parcel#support" target="_blank">Become a sponsor →</a> </div> </div> </div> <h4 class="dark:text-green-400 font-semibold mb-2 text-blue-600 text-xl">💵 Backers</h4> <p class="lg:text-base py-2 text-sm">Backers have donated any amount of money to Parcel. <a class="dark:text-green-400 hover:underline text-blue-600" href="https://opencollective.com/parcel#support" target="_blank">Become a backer →</a></p> <object data="https://opencollective.com/parcel/backers.svg?width=1024&limit=162&button=false" data-md="https://opencollective.com/parcel/backers.svg?width=680&limit=108&button=false" data-sm="https://opencollective.com/parcel/backers.svg?width=300&limit=45&button=false" title="Backers" class="max-w-full mt-2"></object> <h4 class="dark:text-green-400 font-semibold mb-2 mt-12 text-blue-600 text-xl">😍 Contributors</h4> <p class="lg:text-base py-2 text-sm">Contributors help fix bugs and implement new features in Parcel. <a class="dark:text-green-400 hover:underline text-blue-600" href="https://github.com/parcel-bundler/parcel" target="_blank">Become a contributor →</a></p> <object data="https://opencollective.com/parcel/contributors.svg?width=1024&avatarHeight=40&limit=72&button=false" data-md="https://opencollective.com/parcel/contributors.svg?width=680&limit=48&avatarHeight=40&button=false" data-sm="https://opencollective.com/parcel/contributors.svg?width=300&limit=27&avatarHeight=30&button=false" title="Contributors" class="max-w-full mt-2"></object> <script type="module">let t=window.matchMedia("(max-width: 1024px)"),a=window.matchMedia("(max-width: 640px)"),e=()=>{for(let e of document.querySelectorAll("object[data-sm]"))a.matches?e.data=e.dataset.sm:t.matches?e.data=e.dataset.md:e.data=e.dataset.lg};for(let t of document.querySelectorAll("object[data-sm]"))t.dataset.lg=t.data;t.addEventListener("change",e),a.addEventListener("change",e),e();</script> </section> </main> <footer class="dark:text-gray-300 max-w-screen-lg md:px-8 mt-32 mx-auto px-6"> <div class="flex flex-wrap gap-x-20 gap-y-10 justify-start mb-10 px-safe"> <nav class="text-white"> <h3>Getting Started</h3> <ul> <li><a href="/getting-started/webapp/">🌐 Web app</a></li> <li><a href="/getting-started/library/">📔 Library</a></li> <li><a href="/getting-started/migration/">🚚 Migration</a></li> </ul> </nav> <nav class="gap-x-16 grid grid-cols-2"> <h3 class="col-span-2">Features</h3> <ul> <li><a href="/features/development/">🧑‍💻 Development</a></li> <li><a href="/features/code-splitting/">✂️ Code Splitting</a></li> <li><a href="/features/dependency-resolution/">📔 Dependency resolution</a></li> <li><a href="/features/bundle-inlining/">🪆 Bundle inlining</a></li> <li><a href="/features/targets/">🎯 Targets</a></li> </ul> <ul> <li><a href="/features/production/">🚀 Production</a></li> <li><a href="/features/scope-hoisting/">🌳 Scope Hoisting</a></li> <li><a href="/features/node-emulation/">🐢 Node Emulation</a></li> <li><a href="/features/cli/">⌨️ CLI</a></li> <li><a href="/features/parcel-api/">📚 Parcel API</a></li> </ul> </nav> <nav> <h3>Plugin system</h3> <ul> <li><a href="/features/plugins/">Using Plugins</a></li> <li><a href="/plugin-system/overview/">Plugin System</a></li> <li><a href="/plugin-system/authoring-plugins/">Authoring Plugins</a></li> <li><a href="/plugin-system/logging/">Diagnostics</a></li> <li><a href="/plugin-system/source-maps/">Source Maps</a></li> </ul> </nav> <nav> <h3>Links</h3> <ul> <li><a href="https://github.com/parcel-bundler/parcel" target="_blank" rel="noopener">GitHub</a></li> <li><a href="https://www.npmjs.com/package/parcel" target="_blank" rel="noopener">npm</a></li> <li><a href="https://twitter.com/parceljs" target="_blank" rel="noopener">Twitter</a></li> <li><a href="https://discord.gg/XSCzqGRuvr" target="_blank" rel="noopener">Discord</a></li> <li><a href="https://cottonbureau.com/products/parcel-t-shirt" target="_blank" rel="noopener">Swag store</a></li> </ul> </nav> </div> <style>footer nav h3{text-transform:uppercase;--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity));padding-bottom:.5rem;font-size:.75rem;font-weight:600;line-height:1rem}@media (prefers-color-scheme:dark){footer nav h3{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}}footer ul li{padding-top:.25rem;padding-bottom:.25rem;font-size:.875rem;line-height:1.25rem}footer a{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}footer a:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}@media (prefers-color-scheme:dark){footer a{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}footer a:hover{--tw-text-opacity:1;color:rgb(243 244 246/var(--tw-text-opacity))}}</style> <div class="pb-10 text-center text-gray-400 text-xs"> Copyright © <script>document.write((new Date).getFullYear());</script> Devon Govett and Parcel Contributors. This website is <a href="https://github.com/parcel-bundler/website" target="_blank" rel="noopener">open source</a>. </div> </footer> <script type="module">let e=document.querySelectorAll('[role="tablist"]');for(let t of e){let e=t.querySelectorAll('[role="tab"]');for(let t of e)t.tabIndex=-1,t.onfocus=l=>{let o=[...e].find((e=>0===e.tabIndex));o&&(o.tabIndex=-1),t.tabIndex=0};e[0].tabIndex=0,t.onkeydown=t=>{switch(t.key){case"ArrowRight":{let l=[...e].indexOf(document.activeElement),o=e[l+1];o&&(t.preventDefault(),o.focus(),o.click());break}case"ArrowLeft":{let l=[...e].indexOf(document.activeElement),o=e[l-1];o&&(t.preventDefault(),o.focus(),o.click());break}}}}let t=document.querySelectorAll('[role="radiogroup"]');for(let e of t){let t=e.querySelectorAll('[role="radio"]');for(let e of t)e.tabIndex=-1,e.onfocus=l=>{let o=[...t].find((e=>0===e.tabIndex));o&&(o.tabIndex=-1),e.tabIndex=0};t[0].tabIndex=0,e.onkeydown=e=>{switch(e.key){case"ArrowDown":{let l=[...t].indexOf(document.activeElement),o=t[l+1];o&&(e.preventDefault(),o.focus(),o.click());break}case"ArrowUp":{let l=[...t].indexOf(document.activeElement),o=t[l-1];o&&(e.preventDefault(),o.focus(),o.click());break}}}}</script> </body></html>