Question

我正在使用Symfony 4.2，并且我使用的是最后一个WebPack Encore。

我有issu，因为我需要在树枝模板上使用javascript中的函数，但这是行不通的。

我总是有同样的问题：

未捕获的ReferenceError：在（index）：17处未定义consoleText

资产/js/app.js：

require('../css/app.css');
const $ = require('jquery');
global.$ = global.jQuery = $;

assets / js / myFunctions.js

const consoleText = function (log = "Auncun log") {
console.log(log);
};

module.exports = {
    consoleText: consoleText
};

webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

我需要在文件外部访问我的功能consoleText（）。

如果我想访问javascript文件，则可以进行此工作。示例：在我的app.js中，我可以添加：

let myTest = require('./myFunctions');
myTest.consoleText('Blablabla');

编译后可以正常工作。

但是我需要在我的树枝模板（home.html.twig）上访问此功能

在我的base.html.twig中，我用以下命令调用了脚本文件：

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}


    // NEED HERE USE MY FUNCTION LIKE:
    {{ encore_entry_script_tags('myFunctions') }}
    <script>
        consoleText("This don't work");
    </script>
{% endblock %}

我的consoleTest（）函数不起作用，我不明白为什么。我尝试使用Module.export，并尝试使用很多想法，但是我不知道为什么不能在树枝模板上调用函数，所以我需要您的帮助。

谢谢

Answer 1

它不起作用并且符合预期，因为webpack作业的一部分是封装脚本内容，这样您就无法全局访问它，仅在导入后才对其进行调用。解决这个问题的方法可能是：

window.consoleText = function (log = "Auncun log") {
console.log(log);
};

，但是它需要您的脚本由内嵌脚本运行之前的其他任何脚本导入

Answer 2

@Eöras 回想一下... 将细枝传递给js，而不是在细枝上使用js来传递细枝变量。

https://symfony.com/doc/current/frontend/encore/server-data.html

示例： https://gist.github.com/MkLHX/d4d38f4fd1fe702fdb9b2a0077ca9c81

Answer 3

我正在使用Symfony 3.4，并且由于不再维护Assetic，因此我尝试迁移到Encore。但是由于树枝中包含了JS函数，我面临着同样的问题。

经过大量搜索后，没有任何明显的解决方案，只能继续使用Assetic！

在Symfony官方文档中，建议在现有项目上继续使用Assetic： https://symfony.com/doc/3.4/frontend/encore/versus-assetic.html

但是Assetic不再维护了...我不明白逻辑吗？

使用WebPack Encore和Symfony 4在TWIG页面上使用功能Javascript

3 个答案: