使用带有es6导入的jquery插件

Question

我试图使用import将rangelider导入到es6类中，但是它总是返回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

以下是rangeslider.js的源代码，它不提供es6模块支持。 它支持AMD和CommonJs，但不支持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);
}

es6模块化如下：

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

Answer 2

从jQuery插件导入导出值没有意义，因为它们通常导出jQuery实例。

代码中未使用导入的rangeslider这一事实将其从转换后的代码中删除，根本不会导入包。

它应该是

import 'rangeslider.js';