Using a jquery plugin with es6 import

Question

I am trying to import rangeslider into an es6 class using import, however it always returns rangeslider is not a function

import * as rangeslider from 'rangeslider.js';

export class Layout {

    testFunc() {
        $(".rangepicker").rangeslider({
            onSlide: function(position, value)
            {
                $(this).parent().find(".rangepicker-output").html(value + 'px');
            }
        });
    }
}

Answer 1

The below is rangeslider.js 's source code, that do not offer es6 modular support. It support AMD and CommonJs,but not es6.

function(factory) {
'use strict';

if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
} else if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('jquery'));
} else {
    // Browser globals
    factory(jQuery);
}

The es6 modular is like:

export default function foo() {
  console.log('foo');
}

Answer 2

It doesn't make sense to import exported value from jQuery plugins because they conventionally export jQuery instance.

The fact that imported rangeslider isn't used in code eliminates it from transpiled code, the package is not imported at all.

It should be

import 'rangeslider.js';