A web project containing HTML, CSS, JavaScript, Images, and Videos files. The task is to ensure that all the files of the project are compiled and bundled to one separate directly. Before we proceed, I would like to give you a brief introduction to parcel-bundler.
Parcel-bundler: It is a module that helps to transcribe our ES6+ syntax into a traditional JavaScript that is readable by all browser’s engine. Also, it helps to bundle our HTML file, CSS file, and JavaScript file into a single directory called “dist”. So that what we will be using to put our compiled files into one folder.
With the help of parcel-bundler, we would be able to achieve this by simply installing the parcel-bundler module into our project. Below explained steps will guide to the end to keep compiled files in a separate directory.
Prerequisite: The node.js is required, Installation of Node.js on Windows or Installation of Node.js on Linux.
- Step 01: Initialize npm in your project.
npm init
- Step 02: Install parcel-bundler from the node registry
npm install parcel-bundler
- Step 03: Open your package.json file and make the below changes to your scripts object(add the below code to your script object).
"scripts":{ "dev": "parcel index.html", "build": "parcel build index.html", "watch": "parcel watch index.html" }The index.html is the HTML file, the path to the HTML file depends on your code structure e.g. /src/tem/index.html that contains the external JS and external CSS which we want to transcribe and compile to one dir. If you have multiple HTML files, just replace the index.html with *.html. The dev key is usually used to run your project while it’s still on the development phase and the build key inside the script object: the build key helps to build your project for production with the help of the build keyword close to the parcel keyword. The watch key helps to keep your project on automatic transcription & bundling as you make constant changes to your code.
- Step 04: To run your project while on development phase.
npm run dev
- Step 05: To keep your project on a constant watch against any changes while still on the development phase
npm run watch
- Step 06: To run your project for production.
npm run build
- Output: After building your project, you should see a new folder called “dist”, this folder contains all the compiled files which can now be used for production.
Below example illustrates the whole steps:
Example:
- Step 01: Create a folder called “GFG”.
- Step 02: Open the folder in your desired IDLE or IDE.
- Step 03: Inside the folder create a html file called “codeTrans.html” and insert the below html code into the html file.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>neveropen | Transcribed JS to dir</title></head><body><divclass="container"><h1>neveropen</h1><p>With neveropen, we wish to keepchanging the difficulties in techinto berry-pies ?</p><button>Click me</button></div><scriptsrc="./js.js"></script></body></html> - Step 04: Create a JavaSCript file inside the “GFG” folder and name it “js.js”.Add the below code into the javascript file.
const neveropen = () =>{const btn = document.querySelector('button');const para = document.querySelector('p');btn.addEventListener('click', () => {para.textContent +='.neveropen A Computer Science Portal';});}neveropen(); - Step 04: Go to you package.json file and inside the script object,add the below code.
"dev": "parcel index.html", "build": "parcel build codeTrans.html", "watch": "parcel watch codeTrans.html"
- Step 05: To get the compiled file into one directory, open your IDE terminal and run the below code.
npm run build
- Output: A new folder called “dist” holding the compiled files.
