我在Symfony4上使用slickgrid

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

});

最佳答案

Slickgrid是一个编写不良的库,其行为很差,例如依赖于全局变量,依赖于window对象,并且仅通过加载该库就具有副作用。

选项1

要在现代项目中使用这种危险设计的库,您需要使用它们的现代派生。请使用slickgrid-es6

选项2

如果要在npm中继续使用非现代版本,则需要执行以下操作:

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


然后,您将可以访问全局SlickSlick.Core。不建议这样做,因为该库遵循不良做法,尽管已发布到npm,但未遵循任何npm标准。尤其令人恐惧的是,这在npm软件包中根本没有记录。它是最新更新与此问题无关。

选项3

或者,如果您不想使用构建工具,则可以仅包含SlickGrid脚本标记,并使用全局变量SlickSlick.Grid

关于javascript - Slick.Grid不是构造函数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53038410/

10-12 21:07