Parcel: Bundling Your Web App Made Easy
Have you ever tried bundling and you are writing so much code that confuses you or you are a newbie trying to learn how to code, then after learning the language itself someone tells you about learning to configure a bundler and you get like not now?
PARCEL is stress free. No configuration or confusion, you get everything out of the box. Yes I said out of the box.
Parcel is a blazing fast, zero configuration and friendly error logging bundler. With over 27k stars on GitHub and over 24k weekly downloads on npm. You do not have to worry about configuring anything because it does the configuration out of the box for you.
First Parcel install
Entry File
Parcel accepts a file with any extension, you can make either your .html or .js file as your entry point provided you linked your main JavaScript file to your .html file, Parcel will process it for you and replace the reference with a URL to the output file.
Multiple Entry Files
Parcel accepts multiple entry files. This can be done in two ways.
1. Specifying the file names.
2. Creating a glob by using tokens.
The Benefits Of Parcel
Very Fast Bundle Times: It uses worker processes to enable multicore compilation and creates a cache which makes subsequent run a lot faster than the first.
Keyword: Worker processes — It gives developers a way of instructing the browser to process large tasks in the background, therefore preventing the UI from freezing up. Slow tasks like generating a report or sending an email when making an http request or waiting for an http response are offloaded to the worker process.
Zero Configuration: No .config file is needed just pass your entry point as a parameter in your package.json file and you are good to go. It also splits your output bundles so you only load what is needed on initial load or on demand.
Bundles All Your Assets: It supports your HTML, CSS, JS and also file assets by analyzing the dependencies referenced in these files and including them in the output bundle.
Automatic Transforms: When parcel finds a configuration file like .babelrc, it automatically runs the transform. It has support for common transforms and transpilers like Babel, PostCSS and PostHTML while many bundlers require you to install and configure plugins. Parcel does it for you automatically NO CONFIGURATION needed
Hot Module Replacement: It automatically replaces modules in the browser. With NO CONFIGURATION needed.
Friendly error logs: Imagine debugging an error log you do not understand, that would be extremely frustrating. Parcel’s error logs are self explanatory, very easy to understand and to help you know where exactly the issue is coming from.
Production
When it is time to bundle for production. Parcel disables watch mode and hot module replacement so it will only build once. It also enables the minifier for all output bundles to reduce file size. Enabling production mode also sets the NODE_ENV=production environment variable.
Keyword: Minifier — helps in removing all unnecessary characters from source code without changing its functionality. These unnecessary characters usually include white space character, new line character, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.
Parcel VS Webpack
Keyword: Tree Shaking — It is the elimination of dead codes.
Conclusion
Parcel makes bundling stress free and easy. No need to worry about configurations and concentrate on the application you are building.
