Getting Started With Parcel.js: A Web Application Bundler in 2022

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • Sonar - Write Clean JavaScript Code. Always.
  • parcel

    The zero configuration build tool for the web. 📦🚀

    First of all, you’ll notice that Parcel always places your bundled scripts and stylesheets in the same directory as the entry point HTML files. This happens even if you have your CSS and JavaScript files in separate folders. Since these are production files, it might not matter much. But it’s something to keep in mind. The good news is this seems to have been corrected in the upcoming Parcel version 2 (still in Alpha). So there should be a way to override this behavior when that version of Parcel is stable (the current stable version is 1.12.4).

  • Formula-1-Driver-Standings

    🏎🏁 Formula 1 Driver Standings using Pug, Node & a API

    Take a look at my GitHub Repo of a Formula 1 Driver Standings created with Pug, SCSS, and Babel.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

    Webpack is the most popular bundler and it followed on the heels of Require.js, Rollup, and similar solutions. But the learning curve for a tool like webpack is steep. Getting started with webpack isn’t easy due to its complex configurations. As a result, in recent years another solution has emerged. This tool is not necessarily a front-runner, but an easier-to-digest alternative on the front-end module bundler landscape. Introducing Parcel.js.

  • Sass

    Sass makes CSS fun!

    I hope this Parcel tutorial will provide an easy-to-follow introduction to this tool. I’ll cover the basics and then I’ll show you how to use Parcel to bundle a simple web app that incorporates Babel and Sass.

  • RequireJS

    A file and module loader for JavaScript

    Webpack is the most popular bundler and it followed on the heels of Require.js, Rollup, and similar solutions. But the learning curve for a tool like webpack is steep. Getting started with webpack isn’t easy due to its complex configurations. As a result, in recent years another solution has emerged. This tool is not necessarily a front-runner, but an easier-to-digest alternative on the front-end module bundler landscape. Introducing Parcel.js.

  • babel-sublime

    Syntax definitions for ES6 JavaScript with React JSX extensions.

    Parcel.js has built-in support for different code transpilers, including Babel, the popular tool for converting modern next-generation JavaScript to equivalent code that can be understood by all browsers. Because Babel is built into Parcel.js, you don’t need a special plug-in to use it, it just works. Let’s look at an example.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts