使用 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);
};

但在內聯腳本運行之前，它需要任何其他腳本導入您的腳本