如何在已搭建完成的Node项目中引入及使用jQuery功能？

Hey there! Glad you got your Node.js site up and running—let's sort out adding jQuery and using only the parts you need, whether you're working client-side (most common) or even server-side.

Start by installing jQuery via npm (the standard package manager for Node.js):

npm install jquery

This is the typical use case—adding jQuery to your HTML pages for DOM manipulation, event handling, etc.

Option A: Local File Import #

1. Copy the minified jQuery file from your node_modules folder to your static assets directory (e.g., public/js):
   • Source path: node_modules/jquery/dist/jquery.min.js
   • Destination path: public/js/jquery.min.js
2. Add this script tag to your HTML file (place it before your custom JS code for best results):

<script src="/js/jquery.min.js"></script>

3. Now you can use jQuery in your custom scripts, focusing only on the features you need:

// Example: Use click event handling and DOM manipulation
$('#submit-btn').click(function() {
  const inputVal = $('#user-input').val();
  $('.output-container').text(`You entered: ${inputVal}`);
});

Option B: ES Modules + Bundler (Vite/Webpack) #

If you're using a bundler like Vite or Webpack for your frontend code, you can import jQuery directly into your JS modules. The bundler will automatically handle tree-shaking to strip out unused parts of jQuery, reducing your final bundle size:

import $ from 'jquery';

// Only use jQuery's AJAX feature for data fetching
$.get('/api/user-data', function(response) {
  console.log('Fetched user data:', response);
});

If you need jQuery for server-side tasks (like parsing HTML strings), you'll need to pair it with jsdom to simulate a browser environment:

1. Install jsdom:

npm install jsdom

2. Set up jQuery with jsdom in your Node.js code:

const { JSDOM } = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html>');
const $ = require('jquery')(dom.window);

// Example: Parse an HTML string to extract specific content
const html = '<article><h2>Blog Post Title</h2><p>Sample content here</p></article>';
const postTitle = $(html).find('h2').text();
console.log('Extracted title:', postTitle); // Outputs "Blog Post Title"

If you want to avoid loading the entire jQuery library, you can create a custom build with only the modules you need using jquery-builder:

1. Install the builder as a dev dependency:

npm install jquery-builder --save-dev

2. Create a config file (e.g., jquery-config.json) listing the modules you want to include:

{
  "modules": [
    "core",
    "selector",
    "event",
    "ajax"
  ]
}

3. Run the builder to generate your custom jQuery file:

npx jquery-builder --config jquery-config.json > public/js/custom-jquery.js

4. Import this custom file in your HTML just like the full version—now you're only loading the exact features you need!

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