在twig文件中使用webpack JS包

Posted 2021-04-14

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

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

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

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

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

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

答案

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

Symfony Frontend - FAQ and Common Issues

jQuery and Legacy Applications

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