为什么引导JS不在我的模板中工作?

这是一个关于它如何工作的问题,而不是如何修复它。我真的很想理解这一点。

所以我在做一个Vuejs/Symfony项目。我想做的一件事是使用bootstrapJS组件,比如 collapse 为例。

我在应用程序中导入引导程序,并检查它是否导入到我的文件中。

//app.js
import $ from 'jquery'
window.$ = window.jQuery = $
import 'bootstrap'

if (typeof $.fn.popover == 'function') {
    alert('yolo') //works
}

//My view
{% block javascript %}
    {{ parent() }}
    <script>
        if (typeof $.fn.popover == 'function') {
            alert('yolo') //works
        }
    </script>
{% endblock %}

然而,这还不足以让它像我所希望的那样工作。 例如,与属性相关的方法将不起作用

<!-- This does not work -->
<div id="accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

通过搜索,我发现 library (我不能使用,因为做了太多的重构工作)这是在做这个。有什么特别的原因吗?

它是如何工作的?是因为Webpack加载器吗?(我正在使用Webpack Encore)