JS文件导入jQuery和Bootstrap失败的问题求助

问题场景 #

代码在HTML的<script>标签中直接引入jQuery和Bootstrap时能正常运行，但移到独立JS文件后完全失效。尝试过两种导入方式都没用：

import "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js";

以及复制Bootstrap代码到本地文件后导入：

import "bootstrap-copy.js";

核心原因与解决步骤 #

1. 开启浏览器模块模式 #

浏览器默认不会将普通<script>标签当作ES模块处理，使用import语法必须声明模块类型。修改HTML中引用你的JS文件的标签：

<script type="module" src="你的脚本文件名.js"></script>

2. 导入正确的Bootstrap版本 #

你用的bootstrap.bundle.min.js是UMD格式（兼容全局变量、AMD、CommonJS），不适合ES模块的import语法。改用Bootstrap提供的ES模块版本：

import * as bootstrap from 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.esm.min.js';

导入后，可通过bootstrap.Modal、bootstrap.Dropdown等方式调用Bootstrap组件。

3. 修正本地文件导入路径 #

导入本地复制的Bootstrap文件时，必须使用相对路径（浏览器模块导入要求明确路径），比如文件和你的脚本在同一目录下：

import "./bootstrap-copy.js";

注意开头的./，缺少它会被当作模块标识符而非本地文件。

4. 处理jQuery依赖（若仍在使用） #

Bootstrap 5已完全移除jQuery依赖，若代码里还在用$().modal()这类jQuery写法，要么改成Bootstrap原生JS写法，要么单独引入jQuery后使用Bootstrap的jQuery兼容版本（建议优先迁移原生写法）。

额外注意事项 #

• 模块模式下脚本拥有独立作用域，全局变量需要显式挂载到window才能在外部访问；
• 不要同时在HTML中用普通<script>引入Bootstrap，又在模块里导入，会导致重复加载引发冲突。

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