Loading

How to use Parcel in modern application

How to use Parcel in modern application

Parcel is a javascript module bundler. By using it we can bundle many modern applications. It can also call it a zero configuration module bundler because we can use this bundler without any configuration. It is very amazing and that's why I wanted to create useful content for web application developers.

We all heard about Webpack. It is also a module bundler. But its configuration is quite complex. Unlike Webpack, we don't have to configure much more in Parcel. Let's try to install it and how can we use it in our application.

Installation:-

To use Parcel in our application please run the below command. It will download parcel-bundle and install globally.

For yarn users:

yarn global add parcel-bundler

or

For npm users:

npm install -g parcel-bundler

Now, create a package.json file using the following command:

With yarn:

$ yarn init -y

or

With npm:

$ npm init -y

To add an entry point to the application lets create an index.html file. Though Parcel accepts any file type as an entry point, an HTML or JavaScript file is always good to start. Add the following script inside the package.json file under Script block. So the new script block would look like:

"scripts": {
    "start": "parcel serve index.html"
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Parcel Js Concept</title>
</head>
<body>
    <div id="root">Welcome to Parcel</div>
    <script src="index.js"></script>
</body>
</html>

Also, create an index.js file where we gonna write all our javascript code. To test it out write a console log statement inside the index.js file.

console.log('Hello Parcel Js')

That's all! You are ready to go. To run the application execute the following command:

npm run start

Now open http://localhost:YOUR_PORT in the browser and we should be able to see the text "Welcome to Parcel" is displaying in the browser. And also look at the console, we can see the log "Hello Parcel Js".

Parcel also support hot reloading, it will automatically rebuild the application once we change anything in the files and save it.

Now, if we start react development here, there is no need for additional configuration. In fact, we don't have to download react and react-dom Parcel will do that automatically on behalf of us.

Till this point, we can see from the package.json file we haven't installed any dependency yet. In modern development if we want to use react we have to install it first, right? But in the case of Parcel, we don't need to do anything. Just write the import statement inside the index.js file and Parcel will automatically download the package to the application.

import React from 'react';

Save the file and wait for a while. You will see a node_modules folder has been created and inside package.json file react package has been added as a dependency. That means we need to focus on the code and Parcel will make sure to download all the written packages from npm and added as dependencies to the package.json file.

Related Articles