jQuery 使用browserify与npm的jQuery和非npm的插件

在本文中，我们将介绍如何使用browserify和npm包来加载jQuery和非npm插件，并提供示例代码说明。

1. 使用browserify加载jQuery

1.1 安装browserify和jQuery

首先，我们需要在我们的项目中安装browserify和jQuery。在命令行中执行以下命令：

npm install browserify jquery --save

1.2 创建入口文件和打包命令

创建一个名为app.js的入口文件，并在其中引入jQuery：

var $ = require('jquery');

然后，我们需要在package.json文件中添加一个build脚本，用于将代码打包：

"scripts": {
  "build": "browserify app.js -o bundle.js"
}

1.3 打包应用程序

在命令行中执行以下命令，将应用程序打包成一个单独的文件：

npm run build

1.4 在HTML文件中使用打包后的文件

在HTML文件中引入打包后的bundle.js文件：

<script src="bundle.js"></script>

现在，我们可以在HTML文件中使用jQuery，并且可以通过browserify加载其他npm模块。

2. 使用npm加载非npm插件

2.1 安装非npm插件

有时我们可能需要使用一些非npm插件，比如jquery.tablesorter。虽然它不是一个npm包，但我们仍然可以使用browserify加载它。

首先，通过npm安装jquery.tablesorter插件：

npm install jquery.tablesorter --save

2.2 在入口文件中加载非npm插件

在app.js文件中，使用以下代码加载非npm插件：

require('jquery.tablesorter');

这样，我们就可以在应用程序中使用非npm插件jquery.tablesorter了。

2.3 打包应用程序

如第1.3步骤所述，执行打包命令来将应用程序打包成一个单独的文件。

2.4 在HTML文件中使用打包后的文件

在HTML文件中引入打包后的bundle.js文件，就可以在应用程序中使用非npm插件了。

3. 示例演示

下面是一个示例程序，演示了如何使用browserify和npm加载jQuery和非npm插件：

// app.js
var  $= require('jquery'); require('jquery.tablesorter');$ (document).ready(function() {
  // 使用jQuery和非npm插件
  $('.table').tablesorter();
});

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>示例程序</title>
</head>
<body>
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Mike</td>
        <td>30</td>
      </tr>
      <tr>
        <td>Sarah</td>
        <td>20</td>
      </tr>
    </tbody>
  </table>

  <script src="bundle.js"></script>
</body>
</html>

在这个示例中，我们加载了jQuery和非npm插件jquery.tablesorter，并在表格上应用了排序功能。