AppDividend
Latest Code Tutorials

Parcel Web Application Bundler Tutorial From Scratch

1,117

Get real time updates directly on you device, subscribe now.

Parcel Web Application Bundler Tutorial From Scratch. ParcelJS is the web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing and requires zero configuration. With Parcel, you can quickly load modules with either commonJS and ES6 module syntax. Working with webpack was not an easy task because it requires lots of configuration. Although today’s all CLI build tools are built on a webpack, but Parcel is created to get rid of tons of settings and gives us clean application structure. The parceljs is super fast as compare to webpack.

Parcel Web Application Bundler

You can get more information on its official website. It provides the following features.

  1. Blazing fast bundle times.
  2. ParcelJS has out of the box support for JS, CSS, HTML, file assets, and more – no plugins needed.
  3. Code is automatically transformed using Babel, PostCSS, and PostHTML when needed – even node_modules
  4. Using the dynamic import() syntax, Parcel splits your output bundles, so you only load what is needed on initial load.
  5. ParcelJS automatically updates modules in the browser as you make changes during development, no configuration needed.
  6. ParcelJS prints syntax highlighted code frames when it encounters errors to help you pinpoint the problem.

Now, we will see how we can use parceljs in our web application step by step.

Step 1: Install Parceljs.

First, install Parcel using Yarn or npm:

Yarn:

yarn global add parcel-bundler

npm:

npm install -g parcel-bundler

Now, create a new project folder.

Step 2: Create three files inside new project.

We need to create three files.

  1. index.html
  2. index.js
  3. main.js
// main.js

export const add_fn = (x,y) => {
  return parseInt(x) + parseInt(y);
}

Now, import this file in the index.js.

// index.js

import { add_fn } from './main';

alert(add_fn(5,4));

Finally, include this file in the index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>ParcelJS Practice</title>
</head>
<body>
   <script src="index.js"></script>
</body>
</html>

Step 3: Just run parcel index.html.

Just run parcel index.html to start a dev server.

 

Parceljs Tutorial 2018

Now, go to the browser and hit http://localhost:1234/. You can see the alert box that was saying nine as a sum. That is it. You do not need any other config.js related configuration file. You can override that default port no by the following command.

parcel index.html -p 3000

Parceljs generates dist folder and in that create one JS file. It adds dynamically in our HTML file and runs that bundled code. If you see your index.html file’s page source. You can see something like this.

<script src="/dist/e2a6da8197450e2f85f2294413f78d41.js"></script>

So Parcel handles all the stuff. We can use Preprocessors like Sass, Less. We can use Parcel with React.js or Parcel with Vue.js or Parcel with Typescript. In that case, some babel configurations are required, but that is another day’s topic. So, Parcel Web Application Bundler tutorial is over.

2 Comments
  1. Shillongtitude says

    Nice. Parcel’s zero-config quick setup makes it a really good alternative to webpack for smaller projects (or even mid-large scale projects too). Will definitely give Parcel a go with my next project. Thanks for the post.

    1. Krunal says

      Thanks, Keep Sharing!!

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.