Webpack+VS2017+ASP.NET Core 2.0下jQuery插件报method is not a function问题

结合你的场景来看，这个诡异的问题大概率是jQuery实例不统一或者Webpack模块隔离导致全局访问不一致引起的，以下是针对性的排查和解决步骤：

1. 排查是否存在多版本/多实例jQuery #

ASP.NET Core项目的_Layout.cshtml（或其他布局文件）很可能已经通过<script>标签引入了全局的jQuery，而Webpack打包的代码里又通过ProvidePlugin注入了另一处jQuery实例——插件挂载在了Webpack封装的实例上，但控制台访问的是页面全局的那个实例，自然找不到方法。

• 验证方式：
  在Chrome控制台输入console.log(window.jQuery, window.$)，再在index.ts的断点处把模块内的$挂载到全局：window.webpackJQuery = $，然后回到控制台对比window.webpackJQuery === window.$。如果结果是false，就实锤了多实例问题。

• 解决方法：

  • 方案一：移除布局文件里手动引入的jQuery脚本，让Webpack打包的jQuery成为全局唯一实例。
  • 方案二：配置Webpack让打包的jQuery主动挂载到全局window对象，修改webpack.config.js：

    module.exports = {
      // ...其他配置
      plugins: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          // 新增：把jQuery暴露到全局
          'window.jQuery': 'jquery',
          'window.$': 'jquery'
        })
      ]
    }
    

2. 确认插件的加载时机与方式 #

你的插件是非模块化的jQueryPlugin-No-Module.js，必须确保它在目标jQuery实例可用之后加载：

• 如果插件是通过Webpack打包引入：
  在index.ts里确保先完成jQuery注入，再引入插件：

  // index.ts
  // 先确保ProvidePlugin已经注入jQuery
  import './jQueryPlugin-No-Module.js';
  // 后续正常调用插件
  $('.target-element').test();
  

• 如果插件是通过页面<script>标签引入：
  把这个标签放在Webpack打包生成的bundle脚本之后，避免插件执行时还找不到正确的jQuery实例。

3. 调试验证实例一致性 #

在index.ts里添加调试代码，明确插件挂载的实例和控制台访问的是否为同一个：

// index.ts
console.log('模块内插件状态:', $.fn.test);
// 把模块内的jQuery挂载到全局用于对比
window.webpackJQuery = $;

然后在Chrome控制台执行：

console.log('全局插件状态:', window.webpackJQuery.fn.test);
console.log('实例是否一致:', window.webpackJQuery === window.$);

如果window.webpackJQuery.fn.test存在但window.$.fn.test不存在，直接按步骤1的多实例方案解决即可。

4. 可选：用Webpack externals复用全局jQuery #

如果你希望Webpack不打包jQuery，直接复用页面全局的实例，可以配置externals：

module.exports = {
  // ...其他配置
  externals: {
    jquery: 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

这样Webpack会把代码里的$和jQuery直接指向全局的jQuery实例，插件也会挂载到这个全局对象上，控制台访问就完全一致了。

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