For those who would like to code using latest ECMAScript version with webpack, while building project using modern ES6 or ES11 with webpack, it might be necessary to import libraries written in ES5 or earlier versions of JavaScript. I had difficulty importing jQuery-UI into ES6 based application, and here, I'd like to describe one of the possible approaches of how to get it all together.
Introduction
Some of the JavaScript libraries, written using earlier version of JavaScript, e.g., ES5 might be not compatible with ES6 and webpack due to internally defined global functions.
Background
This tip concerns importing js libraries into ES6 / ES11 project with webpack. The problem that might occur while importing ES5 or older libraries is that global functions are unavailable.
Using the Code
For instance, when referencing jQuery-UI library within ES6 / ES11 project that uses webpack, global functions become unavailable. To solve this problem, the only correct approach is to define a separate module and duplicate global functions in there and then import that module in other places. Following are some of the global functions, that require re-writing in a separate module: Sine, Circ, Elastic, Back, Bounce, etc.
For referencing the jQueryUI, there is specific package available: webpack-jquery-ui which allows simple integration into application with webpack.
$ npm i --save 'jquery' 'webpack-jquery-ui' 'gsap'
and then in the JavaScript file can easily include both jQuery and jQueryUI as follows:
import './app.css'
import {TweenMax} from 'gsap'
import {Sine, Circ, Elastic, Back, Bounce} from './modules/jquery-ui-es6-migrations'
import $ from 'jquery';
import 'webpack-jquery-ui'
import 'webpack-jquery-ui/css'
window.$ = window.jQuery = $;
the migrated js code module /modules/jquery-ui-es6-migrations.js looks like this:
const Sine = (p) => {
return 1 - Math.cos( p * Math.PI / 2 )
}
const Circ = (p) => {
return 1 - Math.sqrt( 1 - p * p )
}
const Elastic = (p) => {
return p === 0 || p === 1 ? p : -Math.pow( 2, 8 * ( p - 1 ) ) *
Math.sin( ( ( p - 1 ) * 80 - 7.5 ) * Math.PI / 15 )
}
const Back = (p) => {
return p * p * ( 3 * p - 2 );
}
const Bounce = (p) => {
var pow2,
bounce = 4
while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 )
}
export {Sine, Circ, Elastic, Back, Bounce}
in order to use jQuery with webpack - it needs to supply appropriate plugin within the webpack.config.js file:
module.exports = {
...
plugins: [
...
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
JQuery: 'jquery',
jquery: 'jquery',
'windows.jQuery': 'jquery',
}),
....]
};
Despite that, for loading jQueryUI styles and images, specific loaders have to be added to the webpack.config.js module rules: file-loader, style-loader, css-loader.
$ npm i --save 'file-loader' 'style-loader' 'css-loader'
module: {
rules: [
{
test: /\.css$/,
loaders: ["style-loader","css-loader"]
},
{
test: /\.(jpe?g|png|gif)$/i,
loader:"file-loader",
options:{
name:'[name].[ext]',
outputPath:'assets/images/'
}
},
....
]
},
That's got to be it. jQueryUI with defined static functions imported from the module can be safely used. Following is sample usage of the migrated static functions used for animating container:
function expandContainer() {
const $container = $("#tabs")
const current_height = $("#tabs").outerHeight()
const props_from = {
opacity: .2,
height: 0,
top: -20
},
props_to = {
height: current_height,
opacity: 1,
top: 0
}
TweenMax.set($container, {css: props_from})
TweenMax.to($container, 0.25,
{css: props_to, ease: Sine.easeInOut, onUpdate: null, onComplete() {
$container.addClass('visible').height('')
$container.attr('style', '')
}});
}
function collapseContainer() {
const $container = $("#tabs")
TweenMax.to($container, 0.25, {css: {height: 0, opacity: .2},
ease: Sine.easeInOut, onUpdate: null, onComplete() {
$container.removeClass('visible')
}});
}
The attached source code contains workable version with imported functions which are used for animation purposes.
Points of Interest
What is Webpack and why do web developers need it? Webpack bundles (similar to compilation process) all JavaScript source code files into one bundle (js file). It also watches for JavaScript file changes and automatically re-builds or bundles the project when code is changed. It also automatically reloads / refreshes the webpage. It is a very handy tool, which does all the routine console job during coding process. For example, modify any js file, save it - and it is momentarily, instantly reflected on the webpage. JavaScript code is transpiled, combined into a single file and the browser page is refreshed by webpack behind the scenes.
What Babel is used for? Babel enables usage of the recent JavaScript features that are not supported by many browsers yet by converting (transpiling) modern, latest JavaScript ES6 or ES11 (2020) into widely supported ES5 (supported by all modern browsers). So that developer can use latest JavaScript ES11 features while coding and than, Babel transpiles it into ES5 - to be executable in all modern browsers (since ES11 itself is a standard and it is not yet supported by modern browsers).
Babel integrates into webpack through babel-loader plugin.
npm install --save 'babel-loader'
in the webpack.config.js:
module.exports = {
...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
......
]
}
}
The sample described here is published at codesendbox, however it requires fixes.
Useful Resources
History
- 13th July, 2020: Initial version
- 14th July, 2020: Added sample usage of the imported functions for animation purposes
