If you haven't seen that post, I highly recommend you go through that at -
Configure ESLint and Prettier in VS Code for JavaScript Development
Configure Husky in VS Code for JavaScript Development
Today I am going to talk about another important tool when you are dealing with creating packages for your JavaScripts project. It's called Parcel.
From this post, you can expect -
- Quick introduction of Parcel
- Configure Parcel in Visual Studio Code
- Examples
Quick Introduction of Parcel
Parcel is a web application bundler. It's an alternative of webpack and comes with some different value propositions.
The main features which come with Parcel are -
Parcel makes sure to perform all the above without any configurations with speed. Pretty impressive, right.
Configure Parcel in Visual Studio Code
Step 1 - Initiate npm
We can initiate npm by executing the command "npm init" from the terminal section of the Visual Studio Code. This will ask for a few questions which are very self-explanatory, but we can ignore them by just typing enter. Once the command executes, it will create the file package.json in the workspace.
Step 2 - Install Parcel
We can install parcel as dev dependency by executing the command "npm install -D parcel-bundler" from the terminal section of the Visual Studio Code. Once done, the package.json should add parcel as dev dependency like shown below -
{
"name": "parcel-laerning",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.12.4"
}
}
Step 3 - Update Scripts
In this step, we need to write the scripts which will execute parcel. With the assumption that index.html is the starting point of our application and it is inside a folder named src, we can write down the below two scripts. Dev script is for the development environment and prod is for your prod environment.
{
"name": "parcel-laerning",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel src/index.html",
"prod": "parcel build src/index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.12.4"
}
}
Parcel comes with a built-in development server, which is a big advantage as we no longer needed to set up our local server to run your project. Different scripts for dev and prod will make sure that we will do all our testing in development environment first and when things look good, then only we will create your production bundle. Production bundle will disable hot module replacements and also doesn't watch for the changes in real-time
We can get all the parcel CLI commands at https://parceljs.org/cli.html
Basically, that's all we need to start using Parcel.
Examples
We will create below files (contents of each file will be given) as shown in the picture below -
main.css
body {
background-color: yellow;
}
calculate.js
const doAddition = (x, y) => {
var result = x + y;
console.log("Addition : " + result);
};
const doMultiplication = (x, y) => {
var result = x * y;
console.log("Multiplication : " + result);
};
export { doAddition, doMultiplication };
main.js
import "./../css/main.css";
import { doAddition, doMultiplication } from "./calculate.js";
doAddition(10, 20);
doMultiplication(10, 5);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Parcel</title>
<script src="js/main.js" defer></script>
</head>
<body>
Hello from Sudipta
</body>
</html>
Now we can execute the below command from the terminal which will create the server and if you inspect then we will see the result of addition and multiplication function being printed in the console.
We can see the result by typing the URL (highlighted above) [Note - URL can be different for you] in the browser window and by console should display the result as shown below -
In my next post, I am going to share how we can configure jest and perform testing of our JavaScript code. Till then happy learning.
