Tip about Importing Old Fashioned JavaScript Libraries into ES6 / ES11 Project with webpack

• Download ES6 example with Webpack - 153.2 KB

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

• Configuring webpack with babel for ES6 and later
• Very useful and informative tutorial about webpack, babel and ES6
• Creating custom jQuery UI animations with effects

History

• 13^th July, 2020: Initial version
• 14^th July, 2020: Added sample usage of the imported functions for animation purposes