Webpack Encore: как включить js от /vendor и использовать глобально?

Question

Как включить ресурсы из папки /vendor, чтобы я мог использовать их глобально?

мой base.html.twig:

<script src="{{ asset('build/vendor.js') }}"></script>
<script src="{{ asset('build/color-admin.js') }}"></script>
<script src="{{ asset('build/app.js') }}"></script>

<script>
    $(document).ready(function() {
        App.init();
    });
</script>

И в моем webpack.config у меня есть:

.addEntry('color-admin', [
    onePageJSFolder + '/apps.js',
    onePageCSSFolder + '/animate.css',
    onePageCSSFolder + '/style.css',
    onePageCSSFolder + '/style-responsive.css',
    onePageCSSFolder + '/theme/orange.css',
])

где onePageJSVolder - это действительный URL-адрес папки /vendor:

var frontend = './vendor/suvya/color-admin-3/frontend';
var onePage = frontend + '/one-page-parallax/template_content_html';
var onePageAssetsFolder = onePage + '/assets';
var onePagePluginsFolder = onePageAssetsFolder + '/plugins';
var onePageCSSFolder = onePageAssetsFolder + '/css';
var onePageLessFolder = onePageAssetsFolder + '/less';
var onePageJSFolder = onePageAssetsFolder + '/js';

Но я получаю сообщение об ошибке Приложение не определено. (исходя из base.html.twig). Приложение объявлено в apps.js, но не распознается во всем мире.

Как это можно решить?

Я бегу Symfony-BETA4

Answer 1

Может быть, будет лучше использовать единственный createSharedEntry для base.html.twig? Посмотрите на мой пример приложения реакции:

.createSharedEntry('vendor', [
    'jquery',
    'bootstrap',
    'react',
    'react-dom',
    './node_modules/bootstrap/scss/bootstrap.scss'
])

Он сгенерирует три файла: vandor.css, vendor.js и manifest.js. Этот поток хорошо описан в документации и о вашей проблеме: inside Webpack, when you require a module, it does not (usually) set a global variable. Instead, it just returns a value: Вам нужно проверить глобальные переменные. Посмотрите этот пример решения проблемы jQuery с глобальной переменной, и, возможно, это поможет вам. Как я вижу, вам нужно добавить autoProvideVariables на ваш webpack.config.js

Answer 2

Предполагая, что используемый вами пакет имеет папку Resources\Public, в которой хранятся ресурсы, вы можете использовать командную строку:

php bin/console assets:install

По умолчанию это скопирует всех поставщиков Resource\Public в ваш веб-каталог. В блоге Symfony доступно больше опций. Лучшей практикой Symfony считается хранение всех ваших ресурсов в вашем веб-каталоге. Это учитывает ограниченные общественные компоненты.