使用webpack获取“未捕获的TypeError：$(...).tablesorter不是函数”

这个错误信息表明在使用webpack打包项目时，尝试调用tablesorter函数，但该函数未定义。这通常是由于以下几个原因造成的：

基础概念

tablesorter是一个用于使HTML表格可排序的JavaScript插件。它需要被正确引入并在项目中可用。

可能的原因

未正确安装或引入tablesorter库：可能是因为没有通过npm/yarn安装tablesorter，或者没有在代码中正确引入。
模块导入问题：如果使用ES6模块导入，可能因为路径错误或模块未导出而导致无法找到tablesorter函数。
命名冲突或覆盖：可能存在命名冲突，或者其他脚本覆盖了tablesorter变量。
webpack配置问题：webpack的配置可能没有正确处理tablesorter的加载。

解决方法

步骤1：安装`tablesorter`

首先，确保你已经通过npm或yarn安装了tablesorter：

npm install tablesorter --save
# 或者
yarn add tablesorter

步骤2：正确引入`tablesorter`

在你的JavaScript文件中，确保你正确地引入了tablesorter：

import 'tablesorter';
// 或者如果你使用的是CommonJS模块系统
const tablesorter = require('tablesorter');

步骤3：检查webpack配置

确保你的webpack配置能够处理jQuery和tablesorter。如果需要，你可以添加特定的loader来处理这些库。例如：

module.exports = {
  // ...其他配置...
  module: {
    rules: [
      // ...其他规则...
      {
        test: /jquery|tablesorter/,
        use: 'imports-loader?this=>window'
      }
    ]
  }
};

步骤4：确保没有命名冲突

检查你的代码中是否有其他地方定义了tablesorter变量，这可能会导致冲突。

步骤5：初始化`tablesorter`

确保你在DOM元素加载完成后初始化tablesorter：

$(document).ready(function() {
  $("#myTable").tablesorter();
});

示例代码

以下是一个完整的示例，展示了如何在webpack项目中安装、引入和使用tablesorter：

安装依赖：

npm install jquery tablesorter --save

webpack.config.js：

module.exports = {
  // ...其他配置...
  module: {
    rules: [
      // ...其他规则...
      {
        test: /jquery|tablesorter/,
        use: 'imports-loader?this=>window'
      }
    ]
  }
};

index.js：

import $ from 'jquery';
import 'tablesorter';

$(document).ready(function() {
  $("#myTable").tablesorter();
});

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tablesorter Example</title>
</head>
<body>
  <table id="myTable" class="tablesorter">
    <!-- 表格内容 -->
  </table>
  <script src="bundle.js"></script>
</body>
</html>

通过以上步骤，你应该能够解决“未捕获的TypeError：$(...).tablesorter不是函数”的问题。如果问题仍然存在，建议检查控制台中的其他错误信息，或者查看tablesorter的官方文档以获取更多帮助。