LET'S LEARN TOGETHER. THE BEAUTIFUL THING ABOUT LEARNING IS NOBODY CAN TAKE IT AWAY FROM YOU.

Configure Parcel in VS Code for JavaScript Development


In my previous posts, I have written down the steps which will help you to configure ESLint, Prettier, and Husky in Visual Studio Code to make your JavaScript development easy and making sure code syntax, as well as best practices, are being followed. 

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.
Share:

No comments:

Post a Comment

Never miss a post. Subscribe to get latest blog posts, right into your email box.

* indicates required

Labels

Salesforce (105) Apex (52) admin (28) visualforce (21) ADM (20) dev 501 (19) lightning (19) integration (18) learn salesforce (18) 501 (16) javascript (14) SOAP (13) tutorial (11) Advanced Apex (10) Certification. (10) Kitchener Developer Group (8) Trigger (8) test class (8) Certification (7) flow (7) security (7) unit testing (7) Advanced Admin (6) Lightning Experience (6) SOQL (6) Sharing and Visibility (6) design pattern (6) developer (6) report (6) salesforce release (6) service cloud (6) trailhead (6) use case (6) Lightning Feature (5) New Features (5) css (5) dashboard (5) debug (5) formula (5) mobile (5) solution management (5) JSON (4) Kitchener User Group (4) Knowledge Management (4) Lightning Web Component (4) New Feature (4) Sales Cloud (4) Salesforce DX (4) Tips (4) WebSphere (4) best practice (4) cast iron (4) component (4) deployment (4) event (4) github (4) html (4) map (4) polymer (4) profiles (4) release (4) responsive (4) tdd (4) ui (4) visual studio code (4) Architect (3) Article (3) Live Chat (3) Online Event (3) Opportunity (3) Performance (3) Products (3) REST (3) Role (3) SOSL (3) Salesforce Certification (3) Scratch Org (3) Spring 20 (3) Study Notes. (3) Summer15 (3) VS Code (3) Web Technology (3) Winter21 (3) automation tool (3) configuration (3) dynamic apex (3) license (3) mapbox (3) singleton (3) version controlling (3) AppExchange (2) Asynchronous Apex (2) Asynchronous callout (2) Aura Framework (2) Bulkify (2) Community (2) Data Architecture and Management Certification (2) Devops (2) Distributed Version Controlling (2) ES6 (2) Eclipse (2) Einstein (2) Enhancement (2) Enterprise Territory Management (2) Financial Services Cloud (2) Force.com IDE (2) Governor Limit (2) Groups (2) IBM (2) Implicit Sharing (2) JourneyToCTA (2) LWC (2) Lightning Design System (2) Live Agent (2) Metadata (2) PD II (2) Price Book (2) Queueable (2) SFDX (2) Sharing (2) Spring 15 (2) Summer17 (2) Territory (2) Virtual Event (2) ant (2) basic (2) chatter (2) code coverage (2) coding (2) communication (2) console (2) controller (2) documentation (2) dreamforce (2) git (2) jquery (2) logging (2) object (2) permission (2) process builder (2) salesforce1 (2) strategy (2) visual workflow (2) xml (2) Action Plan (1) Action Plan Template (1) Activity Timeline (1) Advanced Currency (1) Agent Productivity (1) Analytics (1) Apex Sharing (1) Arrow (1) Batch (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Celebration (1) Cheat Sheet (1) Classic (1) Compare (1) Confetti (1) Constructor (1) Contact Center (1) Continuation (1) Continuous Integration (1) Convert (1) Cookie (1) CumulusCI (1) Custom Metadata (1) Custom Object (1) Custom Permission (1) Customer (1) Data Model (1) DataCategories (1) DataGrid (1) DataTable (1) Dated Exchange Rate (1) Decorator Design Pattern (1) Dev Hub (1) Development (1) Diwali (1) EDA (1) ESLint (1) Education Cloud (1) Email (1) FSC (1) Function (1) Future (1) Global Gathering (1) Goals (1) Guest Access (1) Guest Profile (1) Guest User Sharing Rule (1) Guide (1) HEDA (1) Higher Education (1) Household (1) Husky (1) IDE (1) Ideas (1) Improvement (1) Invocable (1) KPIs (1) Knowledge (1) Large Data Volume (1) LastModifiedDate (1) Lightning Knowledge (1) Manage Currencies (1) Manual Sharing (1) Metrics (1) Multi Currency (1) New (1) OOPS (1) OWD (1) Omni-Channel (1) Optimize (1) Partner (1) Permission Set (1) Person Account (1) Photo (1) Pipeline (1) Platform Developer I (1) Platform Developer II (1) Presentation (1) Prettier (1) Product Schedule (1) Profile (1) Promise (1) Prototype (1) Public Site (1) Query Plan (1) QuickReference (1) Related records (1) Reports (1) Retrieve (1) Role Hierarchy (1) SAL (1) Salesfor (1) Salesforce Advisor Link (1) Salesforce Labs (1) Salesforce Optimizer (1) SalesforceDx (1) Schedule (1) Session (1) Sharing Rule (1) Sharing Sets (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Summer14 (1) Summer16 (1) Summer19 (1) Switch (1) SystemModStamp (1) Tile (1) Timeline (1) Unauthorized Access (1) User License (1) Users (1) Validation Rule (1) Web (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) actionFunction (1) actionPoller (1) actionRegion (1) actionSupport (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) cli (1) code (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) duplicate (1) dynamic (1) dynamic form (1) email template (1) email-to-case (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) solution (1) sub-tab (1) survey (1) tab (1) username (1) workflow (1)

Popular Posts

Total Pageviews

Contact Me

Name

Email *

Message *