Question

我真的是twig和webpack的初学者。

我使用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不是函数

在Google搜索了一天后，我发现无法做到这一点...并且我必须做一些额外的事情...每个示例都围绕jQuery。

其他软件包呢？如何从yarn包中全局定义函数，并在树枝文件中使用它。

我尝试了所有这些解决方案，但不适用于我

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

任何人都有任何解决方案，我只需要在twig中调用一个函数:(。

Answer 1

“当您的代码（或您正在使用的某些库）期望$或jQuery为全局变量时，会发生此错误。但是，当您使用Webpack并使用require（'jquery'）时，未设置全局变量。”

Symfony Frontend - FAQ and Common Issues

jQuery and Legacy Applications

// app.js
var $ = require('jquery');
// ...
global.$ = global.jQuery = $;

在树枝文件中使用webpack JS包

1 个答案: