Skip to content

Web Components with Parcel Bundler

Published by kksrini89 on April 11, 2020

Last updated on April 19, 2020

In this blog post, we will learn about publishing the JavaScript Web Components using Parcel bundler.

Introduction

We have been learning building web components since last few blog posts with Vanilla JavaScript.

In recent fast progress with web development, we have web componentsthat helps us to develop the Custom UI elementsbut irrespective of JavaScript Frameworks that we use.

Why Parcel?

We have Webpack, Rollup and Parcel for module bundlers available in the open-source community. But particularly I have chosen to go with Parcel.

The reason behind this is that there should be minimal learning curve for module-bundler, when think about bundling JavaScript application.

As name promised, Parcel is a ZERO Configmodule-bundler. It produces the JavaScript bundle with babel support, code splitting, etc.. by default.

Web Components With Parcel Bundler

To demonstrate further, I have picked one of the web component I recently built Top header bar that we are going to integrate with Parcel bundler.

You can check out vj-top-barweb component.

from npmjs.org

Installation,

npm install parcel-bundler -g

Development build,

That much ease of use I have really felt when I used Parcel bundler for my development activity.

I have index.jsfile which exposes top header barweb component ultimately this would be our entry point.

To test our web component we have index.htmlwhich includes index.jsfile as a reference script.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Top bar</title>
    <script type="module" src="./index.js"></script>
  </head>
  <body>
      <vj-top-bar logo="./assets/images/eat_code.jpg">
        <span slot="logo_title">VJ-Topbar</span>
      </vj-top-bar>
  </body>
</html>

To start parcel we need an entry point ( index.html) and --openflag opens the browser window once build is succeeded,

"dev": "node_modules/.bin/parcel index.html --open

Production Build,

I have two criteria in order to bundle our web component for production.

  • To support old browser?
  • Remove unused scripts/styles?

Yes, we will have to support our web component for older browsers also. In order to do it, we have --globalflag which accepts variable name.

Tree Shakingis the advanced concept in any of the javascript based application that we enable by --experimental-scope-hoistingflag.

Finally our production build script would be,

"build": "node_modules/.bin/parcel build index.js --global vj_top_bar --experimental-scope-hoisting"

You probably noticed one thing across the post, we don’t have any separate configuration file for Parcel. That’s the beauty of this bundler.

After integrated parcel bundler with top-header-barweb component, we have our generated bundle size around 34kb.

Published inAngularFrameworksJavaScriptReact