Webpack Encore + Symfony - 使用从基础加载的模块

Question

我正在将一个旧的大型 symfony 网络应用程序迁移到 webpack encore。目前，我安装了所有的js库，但是我发现了一个问题： 未捕获的引用错误：xxx 未定义

我的结构是下一个。

common.js 我导入了我在很多页面中使用的 js 库（比如 resize-sensor）。
base.html.twig 我打电话给 {{ encore_entry_script_tags('common') }}
扩展 base.html.twig

在 common.js 我加载库：Ej。导入 'resize-sensor';

在我尝试使用的视图中： new ResizeSensor(jQuery('#div-left'), function(){fixElements();});

我收到这个错误： “未捕获的 ReferenceError：未定义 ResizeSensor”

我必须全局导入 jquery、highcharts 和 confirmation2，但我不确定是否要对所有库执行此操作。

那么有什么方法可以从 base 扩展的所有视图中导入 common 的所有内容吗？

Answer 1

In a view I try to use: new ResizeSensor(jQuery('#div-left'), function(){fixElements();});

在您的 js 文件中导入库，并不会在全局范围内“可用”。所以你不能像

那样在你的视图中使用它们

{% block javascripts %}
   {{ parent() }}
   <script>
     $(function(){
        new ResizeSensor(jQuery('#div-left'), function(){fixElements();});
     });
   </script>
{% endblock %}

它们实际上仅在该文件中可用 (common.js)

您可以尝试使用特殊的 global. 语法，或者尝试将它们设为 autoProvidedVariables。你必须试一试最适合你的方法

global

// in your common.js

import ResizeSensor from 'resize-sensor';

global.ResizeSensor = ResizeSensor; // now is ResizeSensor available globaly

autoProvideVariables

// in webpack.config.js

.autoProvidejQuery()
.autoProvideVariables({
   ResizeSensor:  require.resolve('resize-sensor'),
}

现在您可以在您的视图中使用它们。

Webpack Encore + Symfony - 使用从基础加载的模块

Webpack Encore + Symfony - Use modules loaded from base

javascript

symfony

webpack