HTML页面中jQuery引入异常求助：外部JS文件无法正常调用jQuery

你遇到的问题出在两个关键点：

1. 语法不支持+重复引入冲突：普通的<script>标签默认不识别ES模块的import语法，浏览器会直接报错，导致example.js后续代码完全不执行。同时你既通过CDN全局引入了jQuery，又在js文件里用import重复导入，本身就存在逻辑冲突。
2. 全局变量已存在：CDN引入的jQuery已经把$挂载到了全局作用域，不需要再用import重复获取。

根据你的使用场景，有两种可行的处理方式：

方式一：使用全局挂载的jQuery（推荐，匹配你原本的CDN引入逻辑） #

直接删除example.js里的import语句，直接使用全局的$即可：

// 修改后的 example.js
$(function() {
    alert(1);
});

HTML里的引入代码保持不变，就能正常弹出提示框。

方式二：使用ES模块导入jQuery #

如果你想保留import语法，需要做两处修改：

1. 给HTML中引入example.js的<script>标签添加type="module"属性，告知浏览器这是ES模块：

<head>
    <!-- 移除CDN的jQuery引入，避免重复 -->
    <script src="example.js" type="module"></script>
</head>

2. 修改example.js的导入路径，浏览器无法直接识别npm本地模块，可改用CDN的模块版本：

// 修改后的 example.js
import $ from 'https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.esm.min.js';
$(function() {
    alert(1);
});

如果你的项目使用Webpack、Vite等打包工具，则可以保留import $ from "jquery"，打包工具会自动处理模块路径问题。

这段代码没有使用import语法，直接利用了CDN引入的全局$变量，浏览器能正常解析执行，$(function())会在DOM加载完成后触发弹窗，因此可以正常工作。

内容的提问来源于stack exchange，提问作者Julia Langford