技巧分享：webpack 中怎样将完整的 jquery 引入项目中

前言

在前端开发中，jquery 是一个非常流行的 JavaScript 库，它提供了很多方便的 API，使得 DOM 操作和 Ajax 请求变得更加简单。在 webpack 中，我们通常使用 npm 安装 jquery，然后在代码中通过 import 或 require 引入。但是，在一些特殊情况下，我们需要将完整的 jquery 引入项目中，本文将详细介绍如何完成这个过程。

步骤

第一步：下载 jquery

首先，我们需要下载完整的 jquery，可以从官网（https://jquery.com/download/）上下载最新版本的 jquery，也可以从 GitHub 上下载指定版本的 jquery。

第二步：在 webpack 配置中添加 jquery

在 webpack 配置文件中，我们需要添加一个插件，将 jquery 引入到全局中。具体来说，我们需要使用 webpack.ProvidePlugin 插件，代码如下：

// www.javascriptcn.com code example
const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

上面的代码中，我们将 $ 和 jQuery 两个变量指向了 jquery，这样在我们的代码中就可以直接使用 $ 和 jQuery 了。

第三步：在代码中使用 jquery

在上面的配置完成后，我们就可以在代码中使用 jquery 了。例如，在一个 js 文件中，我们可以这样使用：

$(document).ready(function() {
  // ...
});

在一个 html 文件中，我们可以这样使用：

<script>
  $(document).ready(function() {
    // ...
  });
</script>

示例代码

下面是一个完整的示例代码，展示了如何将 jquery 引入项目中：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack + jQuery</title>
  </head>
  <body>
    <div id="app">
      <h1>Hello, jQuery!</h1>
    </div>
    <script src="jquery.js"></script>
    <script src="index.js"></script>
  </body>
</html>

// index.js
$(document).ready(function() {
  $('#app').css('background-color', 'yellow');
});

// www.javascriptcn.com code example
// webpack.config.js
const webpack = require('webpack');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

总结

本文介绍了如何将完整的 jquery 引入到 webpack 项目中。通过使用 webpack.ProvidePlugin 插件，我们可以将 jquery 引入到全局中，然后在代码中直接使用 $ 和 jQuery。这样可以使得我们在某些特殊情况下更加灵活地使用 jquery。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6632d442d3423812e4061172