RequireJS 在使用其变量之前不加载模块

Question

我刚插入 requireJS 的新库出现未定义错误。我知道未定义的错误与使用前未加载的 'wNumb' 模块有关。如果我像这样在 config.js 中加载 'wNumb' 模块：require(['main', 'wNumb']); 一切正常。

// conifg.js
require.config({
  paths: {
    'main': 'main',
    'socketio': './libs/socket.io/socket.io',
    'plotly': './libs/plotly/plotly-latest.min',
    'renderDataToPlotly': './scripts/renderDataToPlotly',
    'noUISlider': './libs/noUiSlider.8.5.1/nouislider.min',
    'wNumb': './libs/wnumb-1.0.2/wNumb',
    'sliders': './scripts/sliders',
    'makePlotlyWindowResponsive': './scripts/makePlotlyWindowResponsive'
  }
});

require(['main']);

// main.js
define([
  'socketio',
  'sliders', //---------------------------------------------> NOTE: sliders.js loading here
  'makePlotlyWindowResponsive',
  'renderDataToPlotly'
  ],
  function(io, sliders, makePlotlyWindowResponsive, renderDataToPlotly) {
    //
  }
);

// sliders.js
define(['noUISlider', 'wNumb'], function(noUISlider, wNumb) {
  console.log(wNumb); // ---------------------------------------------------> undefined
});

问题：为什么会这样？ 'wNumb' 不应该在 console.log(wNumb); 执行时加载吗？

谢谢

Answer 1

我发现 'wNumb' 模块内部发生了什么。我阅读 'wNumb' 代码并在文件末尾看到：

显然，'wNumb' 被导出到 window 对象。当我在 sliders.js 中使用 window.wNumb（1，在图像上）时，它 returns 预期的功能（2，在图像上）。作为证明：

Answer 2

确实，当您在使用 RequireJS 的库时遇到问题，您应该检查它是如何导出自身的。该文档有时会告诉您它与什么兼容。否则，您必须阅读源代码。要将 wNumb 1.0.2 与 RequireJS 一起使用，使其表现得像一个合适的 AMD 模块，您必须使用垫片：

shim: {
    wNumb: {
        exports: "wNumb",
    },
}

这将为模块提供全局变量 wNumb 的值（与 window.wNumb 相同）。这就是您如何获得对 AMD 一无所知但将自己导出到全局 space 以与 RequireJS 一起工作的库。

不过，如果你能把wNumb升级到1.0.4就更好了因为这个版本引入了proper code使wNumb成为一个合适的AMD 模块：当它检测到有可用的 AMD 加载程序时，它会调用 define。那你不需要shim。

RequireJS 在使用其变量之前不加载模块

RequireJS not loading module before use its variables

javascript

requirejs