RequireJS加载define数组最后一个模块时出现错误求助

嘿，兄弟，你的问题其实很典型——你在define的依赖数组里声明了多个模块，但回调函数里只接收了前两个，导致后面的模块没有被正确注入到作用域里，所以调用它们的方法时才会报错。咱们一个个拆解来看：

示例1问题分析 & 修复 #

你的代码是这样的：

define(['jquery', 'js/custom','moment','bootstrap','datetimepicker'], function ($, custom) { 
  $('#input_start_date').datetimepicker({}); 
});

依赖数组最后一个是datetimepicker——这是个依赖jQuery的插件，它需要被加载执行后，才能给jQuery原型添加datetimepicker方法。但你在回调里只写了$和custom两个参数，相当于没告诉RequireJS要把datetimepicker的加载结果注入进来，它可能没在你的代码执行前完成初始化，自然找不到这个方法。

修复后的代码：

// 给所有依赖模块对应上参数，哪怕不用的模块可以用下划线占位（业内约定俗成的写法）
define(['jquery', 'js/custom','moment','bootstrap','datetimepicker'], function ($, custom, _, __, ___) { 
  $('#input_start_date').datetimepicker({}); 
});

// 要是需要直接用moment这类模块，就写对应变量名
define(['jquery', 'js/custom','moment','bootstrap','datetimepicker'], function ($, custom, moment, bootstrap, datetimepicker) { 
  $('#input_start_date').datetimepicker({
    // 比如这里可以用moment配置日期格式
    format: moment.format('YYYY-MM-DD')
  }); 
});

示例2问题分析 & 修复 #

同样的逻辑，你的代码：

define(['jquery', 'js/custom', 'chart'], function ($, custom) { 
  var barChart = new Chart(BARCHART_RegistrantComparison, {}); 
});

依赖数组里的chart模块，需要作为参数传入回调才能使用它导出的Chart构造函数。你没在回调里接收这个参数，当前作用域自然找不到Chart，就会报not a function的错误。

修复后的代码：

// 把Chart作为参数传入回调，直接使用模块导出的构造函数
define(['jquery', 'js/custom', 'chart'], function ($, custom, Chart) { 
  var barChart = new Chart(BARCHART_RegistrantComparison, {}); 
});

关键注意点 #

RequireJS的define严格遵循依赖数组和回调参数一一对应的规则：数组里的第N个模块，会作为回调函数的第N个参数传入。哪怕是只需要加载执行、不需要直接调用的“副作用模块”（比如jQuery插件），也得在回调里给它留个位置，否则RequireJS无法保证它在你的业务代码执行前完成加载初始化。

内容的提问来源于stack exchange，提问作者Bijal