Используйте функцию Javascript на странице TWIG, используя WebPack Encore и Symfony 4 - PullRequest
Новая
       37

Используйте функцию Javascript на странице TWIG, используя WebPack Encore и Symfony 4

0 голосов
/ 14 февраля 2019

Я использую Symfony 4.2, и я использую последний WebPack Encore.

У меня есть проблема, потому что мне нужно использовать функцию из моего javascript в моем шаблоне ветки, но это никогда не работает.

У меня всегда одна и та же проблема:

Uncaught ReferenceError: consoleText не определен в (index): 17

assets / 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 и пытался использовать много мыслей, но я не знаю, почему я не могу вызвать свою функцию в своем шаблоне ветки, поэтому мне нужна ваша помощь.

Спасибо

Ответы [ 2 ]

0 голосов
/ 24 июля 2019

@ Eöras Подумайте наоборот ... Передайте ветку js вместо использования js на ветке для передачи переменных ветки.

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

пример: https://gist.github.com/MkLHX/d4d38f4fd1fe702fdb9b2a0077ca9c81

0 голосов
/ 14 февраля 2019

Это не работает, и это, как и ожидалось, потому что часть работы webpack заключается в инкапсуляции содержимого скрипта, чтобы вы не могли получить к нему глобальный доступ, позволяя вам вызывать его только после того, как вы его импортировали.Обходным путем может быть: 

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

, но для этого потребуется, чтобы ваш скрипт был импортирован любым другим скриптом до встроенный скрипт запущен

...