Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
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.
-
-
-
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).
Take a look at my GitHub Repo of a Formula 1 Driver Standings created with Pug, SCSS, and Babel.
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.
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.
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.
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.