Symfony4中使用Yarn引入Bootstrap4后JavaScript无法正常工作

我之前也碰到过一模一样的情况——用Yarn装了Bootstrap4，CSS正常显示，但导航栏折叠这类JS功能完全没反应，控制台还没报错，折腾半天才找到问题根源，主要是依赖的全局暴露和Bootstrap的引入方式不对，给你一步步来修复：

1. 确保所有依赖都正确安装 #

Bootstrap4必须依赖jQuery和Popper.js才能运行JS组件，先确认这两个包都已安装，没装的话用Yarn补装：

yarn add jquery popper.js bootstrap@4

（注意指定bootstrap@4，避免默认安装到Bootstrap5，两者语法不兼容）

2. 修改app.js的引入逻辑 #

你之前写的require("bootstrap/js/dist/")是错误的——Node.js的require不会自动加载整个目录的文件，而且Bootstrap的JS需要全局的jQuery和Popper对象才能正常初始化。把app.js改成这样：

// 把jQuery暴露到全局，Bootstrap需要全局的$和jQuery变量
global.$ = global.jQuery = require('jquery');

// 暴露Popper.js，Bootstrap4的折叠、下拉、弹窗都依赖它
global.Popper = require('popper.js').default;

// 引入完整的Bootstrap JS，所有组件会自动初始化
require('bootstrap');

如果想减少打包体积，只加载折叠组件的话，可以把最后一行换成：

require('bootstrap/js/dist/collapse');

3. 重新编译前端资产 #

Symfony4用Webpack Encore处理前端打包，修改完app.js后，运行编译命令：

yarn encore dev

生产环境部署时用yarn encore production，会自动压缩代码。

4. 确认模板里的资源引入正确 #

在base.html.twig里，要确保引入了编译后的JS和CSS文件，建议把JS放在body末尾，保证DOM加载完成后再执行：

<!-- 引入Bootstrap样式 -->
<link rel="stylesheet" href="{{ asset('build/app.css') }}">

<!-- 放在body结束前引入JS -->
<script src="{{ asset('build/app.js') }}"></script>

另外还要检查导航栏的HTML结构是否符合Bootstrap4规范，比如折叠按钮的data-toggle和data-target必须对应折叠容器的ID：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">站点名称</a>
  <button class="navbar-toggler" type="button" 
          data-toggle="collapse" 
          data-target="#navbarCollapse"
          aria-controls="navbarCollapse" 
          aria-expanded="false" 
          aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
      </li>
      <!-- 其他导航项 -->
    </ul>
  </div>
</nav>

为什么之前的写法不行？ #

• require("bootstrap/js/dist/")指向目录，Node.js不会自动加载目录内的组件，导致折叠功能的JS代码根本没被引入；
• 没有把jQuery和Popper暴露到全局，Bootstrap的JS组件找不到依赖的全局变量，就算加载了也无法完成初始化，所以控制台没报错，但功能完全失效。

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