использовать функцию, определенную в веб-пакете на странице шаблона - PullRequest
Новая
       9

использовать функцию, определенную в веб-пакете на странице шаблона

0 голосов
/ 30 мая 2018

Я использую webpack с encore и пытаюсь определить повторно используемую функцию в записи веб-пакета и повторно использовать ее в шаблонах

assets / js / app.js:

import {$, jQuery} from 'jquery';
import 'modaal/dist/js/modaal';
import 'foundation-sites';

global.enableAjaxModal = function enableAjaxModal(selector) {
    $(selector).modaal({
        type: 'ajax'
    })
};

webpack.config.js: 

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

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .addStyleEntry('css/app', './assets/css/global.scss')
    .enableSassLoader()
    .autoProvidejQuery()
    .addEntry('js/app', './assets/js/app.js')
;

module.exports = Encore.getWebpackConfig();

twig_template_page: 

<script src="{{ asset('build/js/app.js') }}"></script>
<script type="text/javascript">
    enableAjaxModal('.modaal-new-experience')
</script>

Я получаю: 

Uncaught ReferenceError: enableAjaxModal is not defined

Ответы [ 3 ]

0 голосов
/ 30 мая 2018

Вы расширяете функцию enableAjaxModal в global объекте.

Вы должны вызывать ее с ключевым словом global как 

global.enableAjaxModal('.modaal-new-experience')

Другой способ - сделать его расширениемjQuery as 

$.enableAjaxModal = function (selector) {
    $(selector).modaal({
        type: 'ajax'
    })
};

Использование 

$.enableAjaxModal('.modaal-new-experience')

Обновление

Теперь я вижу проблему.global - это зарезервированное ключевое слово в node.js, которое представляет интерфейс.global это в основном интерфейс.Поэтому, когда вы выполните global.myFunction(), он не найдет его, поскольку у него нет определения в interface Global.

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

Когда вы перейдете к определению global, вы получите его в своем конфигурационном файле, который называется как-то вроде index.d.ts или vendor.d.ts.

Поиск интерфейса interface Global

Расширение вашей функции 

interface Global {
  enableAjaxModal:any
}

Теперь у вас есть доступ к этой функции везде.

0 голосов
/ 30 мая 2018

Наконец, я решил эту проблему, переставив первую строку app.js:

import {$, JQuery) from 'jquery';

на:

global.$ = global.jQuery = require('jquery');

Я думаю, что проблема заключалась в синтаксисе импорта JQuery ES6, я не знаю почему, потому что я проверил, и синтаксис правильный ...

В любом случае спасибо за @Маной и @WhiteRabbit за помощь, я ценю это.

0 голосов
/ 30 мая 2018

Вы можете добавить его в это окно и использовать в любом месте ваших шаблонов: 

function enableAjaxModal (elem) {
    // your code
}

window.enableAjaxModal = enableAjaxModal ;
...