Slick.Grid не является конструктором

Question

Я использую slickgrid на Symfony4

Symfony4 использует webpack систему.

Так что мой исходный код такой,

но это показывает ошибку

Slick.Grid is not a constructor

Обычно эта ошибка означает, что она не загружает переменную, однако я не могу понять, где это неправильно.

в app.js

var $ = require('jquery');
require('bootstrap');
require('slickgrid');

console.log(Slick); // it shows in console `{Event: ƒ, EventData: ƒ, EventHandler: ƒ, Range: ƒ, NonDataRow: ƒ, …}`


$(document).ready(function() {

    var grid;
    var columns = [
      {id: "title", name: "Title", field: "title"},
      {id: "duration", name: "Duration", field: "duration"},
      {id: "%", name: "% Complete", field: "percentComplete"},
      {id: "start", name: "Start", field: "start"},
      {id: "finish", name: "Finish", field: "finish"},
      {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
    ];

    var options = {
      enableCellNavigation: true,
      enableColumnReorder: false
    };

      var data = [];
      for (var i = 0; i < 500; i++) {
        data[i] = {
          title: "Task " + i,
          duration: "5 days",
          percentComplete: Math.round(Math.random() * 100),
          start: "01/01/2009",
          finish: "01/05/2009",
          effortDriven: (i % 5 == 0)
        };
      }
      grid = new Slick.Grid("#myGrid", data, columns, options);

});

Answer 1

Slickgrid является плохо написанной библиотекой, с плохим поведением, таким как использование глобальных переменных, использование оконного объекта и побочные эффекты при простой загрузке библиотеки.

Вариант 1

Чтобы использовать опасные библиотеки, подобные этим, в современных проектах, вам нужно использовать их современные вилки. Вместо этого используйте slickgrid-es6 .

Вариант 2

Если вы хотите продолжать использовать не современную версию в npm, похоже, вам нужно сделать:

require('slickgrid/slick.core.js')
require('slickgrid/slick.grid.js')

И тогда у вас будет доступ к глобальным Slick и Slick.Core. Это не рекомендуется, потому что библиотека следует плохой практике и, несмотря на то, что публикуется в npm, не соответствует никаким стандартам npm. Особенно страшно, что это вообще не задокументировано в пакете npm. Это обновление на сегодняшний день не связано с этой проблемой.

Вариант 3

Или, если вы предпочитаете не использовать инструменты сборки, вы можете просто включить тег сценария SlickGrid и использовать глобальные переменные Slick и Slick.Grid.