自定义jQuery插件出现“jQuery is not defined”错误求助

问题场景 #

你尝试开发了一个自定义jQuery插件，代码如下：

(function ( $ ) {
  $.fn.greenify = function() {
    this.css( "color", "green" );
    return this;
  };
}(jQuery));

同时在app.js中做了这些操作：

import $ from 'jquery';
global.$ = global.jQuery = $;
import './greenify';

但运行时却出现了“jQuery is not defined”的错误，最后发现修改插件里的}(jQuery));部分解决了问题。

错误原因 #

这个问题的核心是ES模块的加载时序和作用域特性导致的：

• ES模块的import语句是静态解析的，会在代码执行前优先加载所有依赖模块。也就是说，当import './greenify'执行时，global.$ = global.jQuery = $这行代码还没来得及执行——插件模块已经开始运行，但全局的jQuery变量还没被赋值。
• 你的插件代码依赖全局作用域中的jQuery变量，但在模块环境下，模块拥有独立的作用域，插件自执行函数里的jQuery参数无法找到全局环境中还未初始化的变量，因此抛出“未定义”的错误。

可行的解决方案 #

方案1：将插件改为ES模块形式（推荐）

直接在插件中显式导入jQuery，不再依赖全局变量，完美适配模块环境：

// greenify.js
import $ from 'jquery';

$.fn.greenify = function() {
  this.css( "color", "green" );
  return this;
};

此时app.js里只需要导入插件即可，无需手动挂载全局变量：

// app.js
import './greenify';

方案2：调整插件自执行函数的参数传入

如果坚持使用自执行函数的写法，可以修改插件确保传入正确的jQuery实例。比如在app.js中先完成全局挂载，再通过动态导入加载插件：

// app.js
import $ from 'jquery';
global.$ = global.jQuery = $;

// 动态导入插件，确保全局变量已赋值
import('./greenify');

或者直接在插件模块内传入已导入的$：

// greenify.js
import $ from 'jquery';

(function ( jQuery ) {
  jQuery.fn.greenify = function() {
    this.css( "color", "green" );
    return this;
  };
}($));

为什么修改}(jQuery));能解决问题 #

本质上是让插件的自执行函数获取到了正确的jQuery实例——原来的写法依赖全局未初始化的jQuery变量，修改后（比如改成}($)或者直接去掉自执行函数使用模块内的$），插件能直接拿到导入的jQuery对象，自然就不会出现“未定义”的错误了。

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