将 Handsontable 与 RequireJS 一起使用答案

【问题标题】：Using Handsontable with RequireJS将 Handsontable 与 RequireJS 一起使用
【发布时间】：2015-04-27 11:35:36
【问题描述】：

使用 requirejs 填充 Handsontable 时，我不断收到以下错误和堆栈跟踪

Uncaught TypeError: undefined is not a function VM18361 handsontable.full.js:20729 
unformatNumeral                                 VM18361 handsontable.full.js:21325
numeral.fn.Numeral.unformat                     VM18361 handsontable.full.js:21325
numeral                                         VM18361 handsontable.full.js:21037

即使是 http://handsontable.com/ 中的示例也会发生这种情况。

我的 requirejs 配置和使用 handsontable 的模块看起来像这样

require.config({                                                                                                                                         
 paths: {
   handsontable : '/js/dependencies/handsontable.full'                                                                               
},                                                                              
shim: {                                                                            
  'handsontable': {                                                             
    deps: ['jquery'],                                                           
    exports: 'Handsontable'                                                     
  }
}                                                                         

define(['handsontable'], function(Handsontable) { 
  var data = [
    ['', 'Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'],
    ['2009', 0, 2941, 4303, 354, 5814],
    ['2010', 3, 2905, 2867, 412, 5284],
    ['2011', 4, 2517, 4822, 552, 6127],
    ['2012', 2, 2422, 5399, 776, 4151]
  ];

  var container = document.getElementById('example');

  var config = {
    data: data,
    minSpareRows: 1,
    colHeaders: true,
    contextMenu: true
  };

  var hot = new Handsontable(container, config); 
});

还有其他人遇到过这个问题吗？

目前，我能看到的唯一解决方案是将 handsontable 包含为全局对象（绕过 requirejs 管理依赖项的全部目的）。

我希望有更好的解决方案。

谢谢！

【问题讨论】：

你能分享给出错误的代码吗？
这看起来像是 Handsontable 内部 API 与 requireJS 一起使用时的一些问题，您应该报告它们。您的代码是正确的，并且您给出的错误提到了 handsontable 中的代码，这意味着您已经得到了正确的对象来自 RequireJS
谢谢，在确定自己的代码没有搞砸之前，我不想报告问题。
你能记录下容器和配置的内容吗？是你所期望的吗？
容器和配置看起来都很正常。在我开始在项目中使用 require.js 之前，几乎完全相同的代码运行良好。

标签： requirejs handsontable

【解决方案1】：

我认为这里的问题是您使用的是完整版的 Handsontable，其中包括依赖项，例如 Numeral.js。由于某些依赖项是 AMD 兼容的，即调用 define()，您最终会引用 Numeral.js 而不是 Handsontable。

要正确使用它，您只需要使用 裸发行版 文件 handsontable.js，并包含该版本 Handsontable 所需的所有依赖项。像这样的：

require.config({                                                                                                                                         
  paths: {
    handsontable : '/js/dependencies/handsontable'                                                                               
  },                                                                              
  shim: {                                                                            
    'handsontable': {                                                             
      deps: ['moment', 'pikaday', 'zeroclipboard'],                                                           
      exports: 'Handsontable'                                                     
    }
  }
})

我不确定您使用的是哪个版本的 Handsontable，当前版本 0.20.3 取决于 moment、pikaday 和 zeroclipboard。请参阅dist/READEME.md 了解更多信息。

【讨论】：