在Application Customizer及多Web Parts中使用jQuery和Bootstrap的最优方案咨询

核心思路就是利用SPFx的全局共享库机制，把jQuery和Bootstrap注册成全局共享资源，这样Application Customizer和所有Web Part都能复用同一实例，彻底避免重复加载。

具体实现步骤： #

1. 安装依赖包
   在项目根目录执行命令安装所需依赖：

npm install jquery bootstrap --save
npm install @types/jquery @types/bootstrap --save-dev

2. 配置全局共享库
   修改config/config.json里的externals节点，添加jQuery和Bootstrap的配置：

"externals": {
  "jquery": {
    "path": "node_modules/jquery/dist/jquery.min.js",
    "globalName": "jQuery"
  },
  "bootstrap": {
    "path": "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "globalName": "bootstrap",
    "globalDependencies": ["jquery"]
  }
}

• path指向本地安装的库文件路径
• globalName对应库暴露的全局变量名
• globalDependencies声明Bootstrap依赖jQuery，保证加载顺序正确

3. 在Application Customizer中全局注入样式
   Bootstrap的样式需要全局生效，直接在Application Customizer的主文件（比如CustomApplicationCustomizer.ts）里导入CSS：

import 'bootstrap/dist/css/bootstrap.min.css';

这样样式会被注入到页面全局，所有Web Part都能直接使用。

4. 在Web Part里引用全局库
   需要用jQuery或Bootstrap的Web Part，直接通过全局变量引用即可，无需重复导入：

declare var jQuery: any;
declare var bootstrap: any;

// 示例：初始化Bootstrap提示框
jQuery(document).ready(() => {
  jQuery('.btn').tooltip();
});

如果想要类型提示，也可以通过类型声明导入：

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';

// 示例
$('.alert').alert();

可选优化：用CDN加载替代本地文件 #

要是想利用CDN的缓存优势，把config.json里的path换成CDN地址就行：

"externals": {
  "jquery": {
    "path": "https://code.jquery.com/jquery-3.7.1.min.js",
    "globalName": "jQuery"
  },
  "bootstrap": {
    "path": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js",
    "globalName": "bootstrap",
    "globalDependencies": ["jquery"]
  }
}

同时在Application Customizer里通过SPComponentLoader加载CDN样式：

import { SPComponentLoader } from '@microsoft/sp-loader';

export default class CustomApplicationCustomizer extends BaseApplicationCustomizer<ICustomApplicationCustomizerProperties> {
  public onInit(): Promise<void> {
    SPComponentLoader.loadCss('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');
    return Promise.resolve();
  }
}

验证效果 #

部署后打开浏览器开发者工具的网络面板，就能看到jQuery和Bootstrap只加载了一次，不管是Application Customizer还是多个Web Part都复用这一份资源。

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