ES6 with modules is preferred by webpack when writing JavaScript code. It means that one module has to export a function so mine could import it and use it. It works well unless the library does not follow ES6 modularity principles like jquery-ui.
Table of contents
If you want to jump to other parts of the tutorial, use table of contents.
Install jquery-ui
I install jquery-ui in a standard way known from other libraries.
npm install jquery-ui --save-dev
This command downloads jquery-ui and adds a proper entry to package.json.
Importing jquery-ui problem
jQuery UI contains some components that I would like to use - like a dialog. The problem is that jQuery UI creates functions in objects from jQuery. Here is a sample dialog creation.
$("#raceInfoDiv").dialog({
resizable: false,
height: "auto",
width: 500,
modal: true,
buttons: []
});
The dialog function comes from jQuery UI but is executed from a standard jQuery object ($("#raceInfoDiv")). I cannot import it by the import statement - import something from 'library' as the library exports nothing so there is nothing to import. I have to force my application to execute jQuery UI JavaScript code which will add the dialog function to jQuery objects.
Importing the whole script
ECMAScript 6 has another syntax of import statement that I can use to import a script that exports nothing.
import 'jquery-ui/ui/widgets/dialog';
I just add the above line to the file that requires the dialog function. Notice that the script I import is one of many available in jQuery UI. dialog.js contains functions for jQuery UI dialogs, but there are some other. Use the one you need.
Summary
This article showed how to use JS scripts that export nothing.
Source code created in this part is on tutorial/part11-jquery-ui branch on GitHub.