使用帶有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';