Javascript 网格不是一个构造器

我正在Symfony4上使用slickgrid

Symfony4使用

webpack

系统

所以我的源代码是这样的

但它显示了错误

Slick.Grid不是构造函数

通常，这个错误意味着它没有加载变量，但是我无法找出哪里出错了

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

});

var$=require（'jquery'）；
需要（“引导”）；
要求（“光滑网格”）；
控制台。日志（光滑）；//它显示在控制台`{Event:ƒ，EventData:ƒ，EventHandler:ƒ，Range:ƒ，NonDataRow:ƒ，…}`
$（文档）.ready（函数（）{
var网格；
变量列=[
{id:“title”，name:“title”，field:“title”}，
{id:“duration”，name:“duration”，field:“duration”}，
{id:“%”，名称：“%Complete”，字段：“percentComplete”}，
{id:“开始”，name:“开始”，field:“开始”}，
{id:“finish”，name:“finish”，field:“finish”}，
{id:“努力驱动”，名称：“努力驱动”，字段：“努力驱动”}
];
变量选项={
enableCellNavigation:true，
enableColumnReorder:false
};
var数据=[]；
对于（变量i=0；i<500；i++）{
数据[i]={
标题：“任务”+i，
持续时间：“5天”，
完成百分比：Math.round（Math.random（）*100），
开始日期：“01/01/2009”，
完成日期：“01/05/2009”，
轻松驱动：（i%5==0）
};
}
grid=new Slick.grid（“myGrid”，数据、列、选项）；
});

Slickgrid是一个写得很差的库，它有一些不好的行为，比如依赖全局变量、依赖窗口对象，以及只需加载库就会产生副作用

选项1

要在现代项目中使用这种设计危险的库，您需要使用它们的现代分支。改用

选项2

如果您想在npm中继续使用非现代版本，您需要执行以下操作：

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

然后您就可以访问全局

Slick

和

Slick.Core

。不建议这样做，因为该库遵循了不好的实践，并且尽管发布到了npm，但不遵循任何npm标准。尤其可怕的是，npm包中根本没有记录这一点。更新到目前为止与此问题无关

选项3

---

或者，如果您不喜欢使用构建工具，您可以简单地包括SlickGrid脚本标记，并使用全局变量

Slick

和

Slick。Grid

SlickGrid是一个编写不好的库，具有依赖全局变量、依赖窗口对象等不良行为，只需加载库即可产生副作用

选项1

要在现代项目中使用这种设计危险的库，您需要使用它们的现代分支。改用

选项2

如果您想在npm中继续使用非现代版本，您需要执行以下操作：

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

然后您就可以访问全局

Slick

和

Slick.Core

。不建议这样做，因为该库遵循了不好的实践，并且尽管发布到了npm，但不遵循任何npm标准。尤其可怕的是，npm包中根本没有记录这一点。更新到目前为止与此问题无关

选项3

---

或者，如果您不喜欢使用构建工具，您可以简单地包括SlickGrid脚本标记，并使用全局变量

Slick

和

Slick.Grid

，谢谢您的评论。我使用npm安装的slickgrid这个slickgrid看起来维护得很好。非常感谢@Andy Ray！！！这个解释确实有助于了解情况。我不认为npm的slickgrid已经过时了。我将尝试

slickgrid-es6

或选项3。我是6pac回购协议的维护者。我主要使用ASP.NET，它有自己的捆绑系统，从未接触过NPM。6pac fork只是维持原始回购协议。NPM支持是通过请求添加的，只是作为一个交付系统而不是打包系统。各种各样的人都在摆弄包装，但我并没有找到一个真正了解包装的人。如果你想写一个警告，我很乐意贴出来。总有一天，我会有时间研究NPM，也许会把它介绍给我的项目。我相信选项2中的评论不符合任何NPM标准，NPM只是一个包管理器，它只用于下载包。相反，应该写的是，SlickGrid不是用ES6编写的，原因很简单，这个库已经有10多年的历史了，当时ES6还不存在。所以我建议这个人做真正的研究，而不是抨击一个拥有1万张选票的开源项目。还要注意的是，我是该库的贡献者，看到这样不正确的答案被发布有点令人沮丧，请用正确的信息更新你的答案。我将继续我以前的文章，NPM是一个包管理器，它与用ES3或ES6编写的库无关。拉取一个包（只需将代码下载到

node\u modules

文件夹）与如何在项目中使用（或导入）库无关。您所指的是模块，同样，这与NPM作为包管理器无关。我知道你想提到在新的ES6和模块世界中很难使用lib，我也理解，但这是另一个与NPM本身无关的主题。谢谢你的评论。我使用npm安装的slickgrid这个slickgrid看起来维护得很好。非常感谢@Andy Ray！！！这个解释确实有助于了解情况。我不认为npm的slickgrid已经过时了。我将尝试

slickgrid-es6

或选项3。我是6pac回购协议的维护者。我主要使用ASP.NET，它有自己的捆绑系统，从未接触过NPM。6pac叉子只是维护