在twig文件中使用webpack JS包

问题描述 投票:0回答:1

我是twigwebpack的初学者。

我用yarn安装了一些软件包并在app.js中使用它们,但由于某些原因,我需要在我的twig文件中使用该软件包的一些方法。当我尝试调用函数时,得到错误。

例如,我安装boostrap-select包,并要求在app.js

// app.js

var $ = require('jquery');

require('bootstrap/dist/js/bootstrap');
require('bootstrap-select/dist/js/bootstrap-select');

$(document).ready(function () {

    $('.selectpicker').selectpicker({});
})(jQuery);

一切都很好,工作完美,但在这样的twig文件中调用此包函数

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('b/app.js') }}"></script>
    <script>
        $('.selectpicker').selectpicker({});
    </script>
{% endblock %}

我收到错误。

未捕获的TypeError:$(...)。selectpicker不是函数

在谷歌搜索了一天后,我发现不能这样做......我必须做一些额外的事情......每个例子都在jQuery附近。

其他包呢?如何在全局范围内定义yarn包中的函数并在twig文件中使用它。

我尝试了所有这些解决方案,但不适合我

funtionName = require('package path')
window.functionName =  functionName;
global.funtionNmae = functionName;

任何人都有任何解决方案,我只需要在树枝上调用一个函数:(。

javascript symfony webpack twig
1个回答
1
投票

“当您的代码(或您正在使用的某些库)期望$或jQuery成为全局变量时会发生此错误。但是,当您使用Webpack和require('jquery')时,不会设置全局变量。”

Symfony Frontend - FAQ and Common Issues

jQuery and Legacy Applications

// app.js
var $ = require('jquery');
// ...
global.$ = global.jQuery = $;
© www.soinside.com 2019 - 2024. All rights reserved.