Import jQuery and jQuery-UI using Parcel JS

Introduction

In my previous post I talked about Parcel JS and how it is a very easy to use JavaScript Bundler.

Today, we will see how to import and use JQuery and JQuery-UI libraries in our application when using Parcel JS.

Above mentioned libraries are very common and powerful in most of the applications. So, it is a very common requirement to import and use them in our code modules.

Steps to Include jQuery and jQuery-UI libraries to the Project

For demos in this post, I make a new branch from existing git repository which contains our front-end application. This is the same code base from previous post.

First, I installed both jQuery and jQuery-ui-dist packages using npm as shown below:

Install jQuery

npm install jquery

Install jQuery UI

Next, in the similar way, I installed jquery-ui-dist package as shown below:

npm install jquery-ui-dist

With both packages installed.

Next, create a file import-jquery.js with following code:

Now, we can include this file in other modules where we want to use jQuery library. For jQuery-UI, we can import it directly in other modules.

Here is an example for your reference:

Index.html

Here is the markup for index.html page . You can see that there is no link to JavaScript library files of jQuery or jQuery-UI (however, I added a style-sheet link for CSS file of jquery-ui)

Test the Application

We can now run and test the application by using npm run dev command and here how the web page looks like:

Build the Application

Once we are done with development and testing the application. We can build the application using npm run build command and check the dist folder, which now contains all the dependencies for our application as well. We can simply deploy this folder to our web application server as needed.

Summary

Using jQuery as a module in JavaScript applications is a common requirement. In this post, we learned how to use it with Parcel JS module loader. This time again, it require very less effort to include these packages in our application.

Also, when we prepare the production build of our application code, we saw that Parcel JS took care of these dependencies automatically. So far this bundler is very easy to use.

You can download the sample code from this git repository (branch: jqueryImport)

Let me know if you have some questions or comments. Till next time, Happy Coding.

My Recent Books