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

Question

我使用的是 Symfony 4.2，我使用的是最后一个 WebPack Encore。

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

我总是有同样的问题：

未捕获的 ReferenceError：consoleText 未在 (index):17 处定义

资产/js/app.js：

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

资产/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

@Eöras 反向思考......将树枝传递给 js 而不是在树枝上使用 js 来传递树枝变量。

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

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

Answer 2

它不工作，并且正如预期的那样，因为 webpack 工作的一部分是封装脚本内容，因此您无法全局访问它，让您只能在导入后调用它。 一种解决方法可能是：

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

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