如何在app.js中导入tomselect以避免浏览器错误？

Question

我正在开发一个使用 webpack / encore 的 symfony 5.4 应用程序。我想使用 tomselect javascript 插件。我用yarn安装了它，并想以某种方式将它导入到app.js中，但它不起作用。

我在 app.js 中尝试了这种方法：

TomSelect = window.TomSelect = require('tom-select');

并且

import {TomSelect} from 'tom-select'

我总是在浏览

import TomSelect from "tom-select/dist/js/tom-select.complete.min.js";

我在 html.twig 文件中写了这个：

{% block javascripts %}
    {{ parent() }}
    <script>
        new TomSelect('select', {});
    </script>
{% endblock %}

器的 javascript 控制台中收到错误：

未捕获的引用错误：TomSelect 未定义

but if I import this way, TomSelect is work:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tom-select/2.0.1/js/tom-select.complete.js"></script>
    <script>
        new TomSelect('select', {});
    </script>

那么我应该在 app.js 中编写什么以使 tomselect 工作？

Answer 1

有同样的问题。您需要推迟 TomSelect 对象的初始化。您的 JS 代码会在加载 app.js 之前执行。

将 TomSelect 包含到您的 app.js 包中应该可以按照您的方式工作：

window.TomSelect = require('tom-select');

然后，将您的初始化包装到 DOMContentLoaded 事件处理程序中：

document.addEventListener("DOMContentLoaded", function(event) {
  new TomSelect('select', {});
});

Answer 2

尝试使用：

const TomSelect = require('tom-select')