npm安装jQuery后import引入无效，寻求非CDN解决方案

常见原因及修复方案 #

1. 检查jQuery版本的ES模块支持 #

jQuery从3.6.0版本开始才原生支持ES模块导入，若你安装的版本低于此，直接用import $ from 'jquery'会失效。

• 查看当前jQuery版本：npm list jquery
• 版本过低则升级到最新稳定版：npm install jquery@latest --save

2. 配置打包工具（Webpack/Vite） #

如果项目使用打包工具，需额外配置让它正确识别jQuery：

• Webpack：在webpack.config.js中添加ProvidePlugin实现全局注入：

const webpack = require('webpack');

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

配置完成后无需手动import，直接在代码中使用$即可。

• Vite：在vite.config.js中配置别名指向jQuery的编译版本：

import { defineConfig } from 'vite';

export default defineConfig({
  // 其他配置项
  resolve: {
    alias: {
      'jquery': 'jquery/dist/jquery.min.js'
    }
  }
});

或直接在代码中导入编译后的版本：import $ from 'jquery/dist/jquery.min.js'

3. 手动挂载jQuery到全局对象 #

若上述方案无效，可手动将jQuery挂载到window，确保全局可用：

import * as jquery from 'jquery';
window.$ = jquery;
window.jQuery = jquery;

之后再执行DOM操作代码：$('.c').hide();

4. 调整导入语法 #

尝试使用更明确的导入路径：

import $ from 'jquery/src/jquery';

若项目是CommonJS环境，改用require语法：

const $ = require('jquery');

验证步骤 #

1. 确认package.json的dependencies中已包含jQuery
2. 清理打包缓存（如Webpack的dist目录、Vite的node_modules/.vite）
3. 重启开发服务器并重新打包项目

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