Slick.Grid 不是构造函数

Question

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

});

Answer 1

Slickgrid 是一个写得不好的库，具有不良行为，例如依赖全局变量、依赖 window 对象以及仅通过加载库就会产生副作用。

选项 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.

Slick.Grid 不是构造函数

Slick.Grid is not a constructor

javascript

jquery

webpack

slickgrid