Laravel 11 + Vite 项目如何仅在单个页面引入jQuery？

可以实现仅在目标页面引入jQuery，无需全局挂载，具体步骤如下：

• 步骤1：移除全局jQuery引入
  打开bootstrap.js，删除其中全局引入jQuery的代码（通常是类似以下内容）：

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

• 步骤2：在页面专属JS中引入并挂载jQuery
  修改你的trumbowyg-page.js，先引入jQuery并挂载到全局对象，再加载Trumbowyg（Trumbowyg默认依赖全局的$/jQuery）：

  import $ from 'jquery';
  // 将jQuery挂载到window，满足Trumbowyg的依赖需求
  window.$ = window.jQuery = $;
  
  import "trumbowyg/dist/ui/trumbowyg.min.css";
  import "trumbowyg";
  
  $(document).ready(function () {
      $.trumbowyg.svgPath = window.trumbowygSvgPath;
      $("#trumbowyg-editor").trumbowyg();
  });
  

• 步骤3：保持Blade模板的引入不变
  原有的模板代码无需修改，Vite会自动处理该页面JS的依赖打包，仅在当前页面加载jQuery和Trumbowyg资源：

  <script type="module">
          window.trumbowygSvgPath = '{{ Vite::asset('resources/images/icons.svg') }}';
  </script>
  <script type="module" src="{{ Vite::asset('resources/js/trumbowyg-page.js') }}"></script>
  

原理说明：
Trumbowyg编辑器默认依赖全局作用域下的$或jQuery对象，之前仅全局引入时才能找到该对象。现在通过在页面专属JS中引入jQuery并挂载到window，既满足了Trumbowyg的依赖需求，又保证了jQuery仅在当前页面加载，不会增加其他页面的资源体积。

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