如何在JavaScript文件中正确导入jQuery

以下是不同项目场景下的可用实现方案，按需选择即可：

方案1：全局引入（传统网页项目最常用） #

• 不需要在JS文件内写导入语句，先在HTML文件中按顺序引入jQuery文件和你自己的业务JS文件，jQuery会自动挂载到全局作用域
• 引入顺序不能颠倒，否则会出现$ is not defined报错

<!-- 先引入jQuery，src替换为你本地存放jQuery的实际路径 -->
<script src="/your-local-path/jquery.min.js"></script>
<!-- 再引入你自己的业务JS文件 -->
<script src="/your-js-file/main.js"></script>

该方式引入完成后，你可以在任意自己的JS文件中直接使用$或者jQuery调用相关方法，无需额外配置。

方案2：ES Module 导入（适合Vite/Webpack等构建工具项目、原生ES模块环境） #

• 第一步先在项目根目录执行命令安装jQuery依赖：

npm install jquery

• 第二步在需要使用jQuery的JS文件顶部添加导入语句，之后就可以正常调用：

// 导入jQuery并绑定到$变量
import $ from 'jquery'

// 正常使用即可
$(function () {
  console.log('jQuery加载成功，可正常调用方法')
})

方案3：JS动态加载（适合不想修改HTML结构、需要自主控制加载时机的场景） #

• 直接在JS文件中动态创建script标签加载jQuery，等加载完成后再执行依赖jQuery的逻辑：

const script = document.createElement('script')
// src替换为你本地jQuery文件的实际访问路径
script.src = '/your-local-path/jquery.min.js'
script.onload = function () {
  // 所有依赖jQuery的逻辑写在onload回调里，保证加载完成后再执行
  $(function () {
    console.log('动态加载jQuery完成，可正常使用')
  })
}
document.head.appendChild(script)

常见踩坑提醒 #

• 所有方案都要保证jQuery加载完成后再执行调用代码，否则必然出现未定义报错
• 如果使用构建工具时导入后仍报错，先检查node_modules内是否存在jquery依赖，重启开发服务后再尝试

内容的提问来源于stack exchange，提问作者Cihan Toker