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

Question

我正在将一个旧的大型symfony web应用程序迁移到webpack encore。现在，我安装了所有的js库，但我发现了一个问题:Uncaught ReferenceError: xxx is not defined

我的结构是下一个

• common.js，我在这里导入我在很多页面中使用的js库(如resize-sensor)。
• base.html。我调用{{encore_entry_script_tags('common')}}的树枝
• 扩展base.html.twig
的最终视图

在common.js中，我加载库:进口的resize-sensor;

在一个视图中，我尝试使用:new ResizeSensor(jQuery('#div-left')， function(){fixElements();});

我得到了这个错误:未捕获的ReferenceError: resizessensor is not defined">

我必须导入jquery, highcharts和confiration2全局，但我不确定我想这样做与所有的库。

有没有办法导入所有从base扩展的视图中的common内容?

Answer 1

在我尝试使用一个视图:新ResizeSensor (jQuery("#div-left"),函数(){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'),
}

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