Magento2中调用jquery cropzee报$(...).cropzee is not a function错误如何解决

错误原因 #

• 核心问题是代码执行顺序颠倒：你在代码中先执行了$("#crop").cropzee()调用，之后才通过$.fn.extend给jQuery原型挂载cropzee方法，调用时方法还未完成注册，因此抛出「不是函数」的错误。
• 次要可优化点：部分低版本浏览器不支持ES6函数默认参数写法function (options = {})，存在兼容风险。
• 额外检查点：你当前require的依赖数组里只有croppr，如果你的cropzee是第三方插件而非自定义实现，你还漏了cropzee本身的脚本依赖引入。

解决方案 #

方案1：自定义实现cropzee插件的场景 #

调整代码顺序，先注册插件再调用，修正后代码如下：

require(['jquery','croppr','canvastoblob','FileSaver'],
  function($,croppr,canvastoblob,FileSaver){

// 第一步：先注册jQuery插件
var defaultWidth = 210;
$.fn.extend({
    // 兼容写法替换默认参数
    cropzee: function (options) {
        options = options || {
            aspectRatio: null,
            maxSize: null,
            minSize: null,
            startSize: [100, 100, '%'],
            // 剩余你的插件配置
        }
        // 插件剩余业务逻辑
    }
})

// 第二步：注册完成后再调用方法
$(document).ready(function() {
    $("#crop").cropzee();
});

})

方案2：使用第三方cropzee插件的场景 #

• 先在require的依赖配置中添加cropzee的路径映射
• 在依赖数组中引入cropzee，无需自己编写$.fn.extend的注册逻辑，代码示例：

require(['jquery','croppr','cropzee','canvastoblob','FileSaver'],
  function($,croppr,cropzee,canvastoblob,FileSaver){
    $(document).ready(function() {
        $("#crop").cropzee();
    });
})

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