Using velocity with jquery for IE8 in ES6

Question

I am trying to use velocity together with jQuery (only for IE8 support) in an ES6 module. Consider this code:

import { Component } from 'react';
import ReactDOM from 'react-dom';
import jquery from 'jquery';
import velocity from 'velocity-animate';

export default class ScrollTo extends Component {
    render() {...}
    scrollToTop() {
        velocity(ReactDOM.findDOMNode(this), 'scroll', { container: ReactDOM.findDOMNode(this.props.container) });
    }

In IE8 velocity complains it cannot find jQuery. I checked in the source and it looks like velocity looks for jQuery on the window object but I'm importing it as a module.

Is there a way to instantiate/bind velocity with the imported jquery?

Answer 1

you can use ShimPlugin to shim jquery with webpack

see: https://github.com/webpack/webpack/issues/192

or use ProvidePlugin to expose jquery to window, so that you don't have to import jquery every time you need it.

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

plugin ProvidePlugin This plugin makes a module available as variable in every module. The module is required only if you use the variable.

Example: Make $ and jQuery available in every module without writing require("jquery").