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');
            }
        });
    }
}

sinbar · Accepted Answer · 2017-10-01 14:03:32Z

3

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');
}

answered Oct 1, 2017 at 14:03

sinbar

1,0732 gold badges9 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Estus Flask Over a year ago

CommonJS exports are handled by Webpack. NPM packages don't have to be ES modules to be imported in transpiled application.

sinbar Over a year ago

The question's desc does not indicate that use webpack. If use webpack to packaging,the infomation for the question is too few, you need offer the webpack.config.js

Estus Flask · Accepted Answer · 2017-10-01 18:56:38Z

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';

answered Oct 1, 2017 at 18:56

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Collectives™ on Stack Overflow

Using a jquery plugin with es6 import

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related