Webpack Encore - плагины jQuery вне поля зрения

Я пытаюсь использовать SensioLab Webpack Encore в своем проекте Symfony 3.3, но после добавления нескольких сценариев в веб-пакет мой сценарий не видит функций других сценариев.

package.json

{
  "name": "HIDDEN",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "description": "HIDDEN",
  "repository": {
    "url": "HIDDEN",
    "type": "git"
  },
  "author": "Alexey Samara <HIDDEN>",
  "dependencies": {
    "jquery": "3.1.1",
    "expose-loader": "0.7.3",
    "bootstrap": "3.3.7",
    "datatables.net": "1.10.15",
    "datatables.net-buttons": "1.4.0",
    "datatables.net-buttons-bs": "1.4.0",
    "html5shiv": "^3.7.3",
    "respond.js": "^1.4.2",
    "metismenu": "2.7.0",
    "slimscroll": "0.9.1",
    "pace-js": "1.0.2",
    "gritter": "1.7.4",
    "toastr": "2.1.2",
    "jquery.flot": "0.8.3",
    "jquery.flot.tooltip": "0.9.0",
    "ecore-template-skeleton-static": "git+ssh://HIDDEN"
  },
  "devDependencies": {
    "@symfony/webpack-encore": "^0.11.0",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6"
  }
}

webpack.config.json

var Encore = require('@symfony/webpack-encore'),
    eCoreTemplatePath = './node_modules/ecore-template-skeleton-static/';

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .enableSassLoader()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning()
    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery'
    })
    .addLoader({
        test: require.resolve('jquery'),
        use: [
            {loader: 'expose-loader', options: 'jQuery'},
            {loader: 'expose-loader', options: '$'}
        ]
    })
    .cleanupOutputBeforeBuild()
    .addEntry('jquery', './node_modules/jquery/dist/jquery.min.js')
    .addEntry('bootstrap', [
        './node_modules/bootstrap/dist/js/bootstrap.min.js',
        eCoreTemplatePath + 'css/bootstrap.min.css',
        eCoreTemplatePath + 'font-awesome/css/font-awesome.min.css'
    ])
    .addStyleEntry('animate', eCoreTemplatePath + 'css/animate.css')
    .addEntry('metismenu', [
        './node_modules/metismenu/dist/jquery.metisMenu.js',
        './node_modules/metismenu/dist/metisMenu.min.css'
    ])
    .addEntry('slimscroll', eCoreTemplatePath + 'js/plugins/slimscroll/jquery.slimscroll.min.js')
    .addEntry('pace', eCoreTemplatePath + 'js/plugins/pace/pace.min.js')
    .addEntry('gritter', [
        eCoreTemplatePath + 'js/plugins/gritter/jquery.gritter.min.js',
        eCoreTemplatePath + 'js/plugins/gritter/jquery.gritter.css'
    ])
    .addEntry('toastr', [
        eCoreTemplatePath + 'js/plugins/toastr/toastr.min.js',
        eCoreTemplatePath + 'css/plugins/toastr/toastr.min.css'
    ])
    .addEntry('flot', [
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.tooltip.min.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.spline.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.resize.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.pie.js'
    ])
    .addEntry('iCheck', [
        eCoreTemplatePath + 'js/plugins/iCheck/icheck.min.js',
        eCoreTemplatePath + 'css/plugins/iCheck/custom.css'
    ])
    .addEntry('datatables',[
        eCoreTemplatePath + 'js/plugins/dataTables/datatables.min.js',
        './node_modules/datatables.net-buttons/js/dataTables.buttons.js',
        './node_modules/datatables.net-buttons-bs/js/buttons.bootstrap.js',
        eCoreTemplatePath + 'css/plugins/dataTables/datatables.min.css',
        './node_modules/datatables.net-buttons-bs/css/buttons.bootstrap.css'
    ])
    .addEntry('fixIE', [
        './node_modules/html5shiv/dist/html5shiv.min.js',
        './node_modules/respond.js/dest/respond.min.js'
    ])
    .addEntry('ecore-template-skeleton-static',[
        eCoreTemplatePath + 'js/inspinia.js',
        eCoreTemplatePath + 'css/style.css'
    ])
;

module.exports = Encore.getWebpackConfig();

layout.html.twig

{% block javascripts %}
    <script src="{{ asset('build/jquery.js') }}"></script>
    <script src="{{ asset('build/bootstrap.js') }}"></script>
    <script src="{{ asset('build/metismenu.js') }}"></script>
    <script src="{{ asset('build/slimscroll.js') }}"></script>
    <script src="{{ asset('build/pace.js') }}"></script>
    <script src="{{ asset('build/toastr.js') }}"></script>
    <script src="{{ asset('build/iCheck.js') }}"></script>
    <script src="{{ asset('build/ecore-template-skeleton-static.js') }}"></script>
    {% endblock %}

В результате я получил:

Uncaught TypeError: $ (...). MetisMenu не является функцией в HTMLDocument. (ecore-template-skeleton-static.467b4f0501b93aee4b47.js:97) в mightThrow (ecore-template-skeleton-static.467b4f0501b93aee4b47.js:3962) в процессе (ecore-template-skeleton-static.467b4f0501b93aee4b47.s)

Ecore-шаблоны каркасно-static.467b4f0501b93aee4b47.js: 97

$('#side-menu').metisMenu();
Источник

1 ответ

Решение

Ну, я потратил ~10 часов, чтобы найти решение, и я надеюсь, что оно будет кому-то полезно...

Как предоставить jQuery в Symfony Webpack Encore

autoProvideVariables не работает, например autoProvideVariables, поэтому выполните следующие действия:

  1. в webpack.config.json удалить всех провайдеров:

    • autoProvidejQuery ()
    • autoProvideVariables ()
    • addLoader ()

  2. Создайте файл в вашем комплекте, например, jquery.init.js:

var $ = require('jquery');
window.$ = $;
window.jQuery = $;

  1. Удалите из jquery-записи webpack.config.js и добавьте созданный вами js-файл. 

var Encore = require('@symfony/webpack-encore'),
    eCoreTemplatePath = './node_modules/ecore-template-skeleton-static/';

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning()
    .addEntry('jquery', './src/MyApp/AppBundle/Resources/assets/js/jquery.init.js')
    .addEntry('bootstrap', [
        './node_modules/bootstrap/dist/js/bootstrap.min.js',
        eCoreTemplatePath + 'css/bootstrap.min.css',
        eCoreTemplatePath + 'font-awesome/css/font-awesome.min.css'
    ])
    .addStyleEntry('animate', eCoreTemplatePath + 'css/animate.css')
    .addEntry('metismenu', [
        './node_modules/metismenu/dist/metisMenu.js',
        './node_modules/metismenu/dist/metisMenu.min.css'
    ])
    .addEntry('slimscroll', eCoreTemplatePath + 'js/plugins/slimscroll/jquery.slimscroll.min.js')
    .addEntry('pace', eCoreTemplatePath + 'js/plugins/pace/pace.min.js')
    .addEntry('gritter', [
        eCoreTemplatePath + 'js/plugins/gritter/jquery.gritter.min.js',
        eCoreTemplatePath + 'js/plugins/gritter/jquery.gritter.css'
    ])
    .addEntry('toastr', [
        eCoreTemplatePath + 'js/plugins/toastr/toastr.min.js',
        eCoreTemplatePath + 'css/plugins/toastr/toastr.min.css'
    ])
    .addEntry('flot', [
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.tooltip.min.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.spline.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.resize.js',
        eCoreTemplatePath + 'js/plugins/flot/jquery.flot.pie.js'
    ])
    .addEntry('iCheck', [
        eCoreTemplatePath + 'js/plugins/iCheck/icheck.min.js',
        eCoreTemplatePath + 'css/plugins/iCheck/custom.css'
    ])
    .addEntry('datatables',[
        eCoreTemplatePath + 'js/plugins/dataTables/datatables.min.js',
        './node_modules/datatables.net-buttons/js/dataTables.buttons.js',
        './node_modules/datatables.net-buttons-bs/js/buttons.bootstrap.js',
        eCoreTemplatePath + 'css/plugins/dataTables/datatables.min.css',
        './node_modules/datatables.net-buttons-bs/css/buttons.bootstrap.css'
    ])
    .addEntry('fixIE', [
        './node_modules/html5shiv/dist/html5shiv.min.js',
        './node_modules/respond.js/dest/respond.min.js'
    ])
    .addEntry('ecore-template-skeleton-static',[
        eCoreTemplatePath + 'js/inspinia.js',
        eCoreTemplatePath + 'css/style.css'
    ])
;

module.exports = Encore.getWebpackConfig();

Вот и все.... Все работает!

Источник
Другие вопросы по тегам