1

我正在尝试在我的 Symfony 3.3 项目中使用 SensioLab Webpack Encore,但是在向 webpack 添加了一些脚本后,我的脚本看不到其他脚本的功能。

包.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();

布局.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 %}

结果,我得到了:

未捕获的 TypeError:$(...).metisMenu 不是 HTMLDocument 中的函数。(ecore-template-skeleton-static.467b4f0501b93aee4b47.js:97)在mayThrow(ecore-template-skeleton-static.467b4f0501b93aee4b47.js:3962)在进程(ecore-template-skeleton-static.467b4f0501b93aee4b47.js:4030)

生态模板骨架静态.467b4f0501b93aee4b47.js:97

$('#side-menu').metisMenu();
4

1 回答 1

12

好吧,我花了大约 10 个小时来寻找解决方案,我希望它对某人有用......

如何在 Symfony Webpack Encore 中提供 jQuery

autoProvideVariables 不起作用,例如 autoProvideVariables,因此请执行以下步骤:

  1. 在 webpack.config.json 中删除所有提供者:

    • 自动提供jQuery()
    • 自动提供变量()
    • addLoader()
  2. 在你的包中创建文件,例如 jquery.init.js:

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

  1. 从 webpack.config.js jquery 条目中删除并添加您创建的 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();

就是这样......一切正常!

于 2017-08-16T12:16:38.487 回答