Webpack Encore - jQuery 插件不可见

Question

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

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 is not a function at HTMLDocument. (ecore-template-skeleton-static.467b4f0501b93aee4b47.js:97) at mightThrow (ecore-template-skeleton-static.467b4f0501b93aee4b47.js:3962) at process (ecore-template-skeleton-static.467b4f0501b93aee4b47.js:4030)

ecore-template-skeleton-static.467b4f0501b93aee4b47.js:97

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

Answer 1

Well, I've spend ~10 hours to find solution, and I hope it will be useful for someone...

如何在Symfony Webpack Encore

中提供jQuery

autoProvideVariables 无法正常工作，例如 autoProvideVariables，因此请执行后续步骤：

在 webpack.config.json 中删除所有提供商：
- 自动提供jQuery()
- autoProvideVariables()
- addLoader()
在您的包中创建文件，例如 jquery.init.js:

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

从 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();

就这些....一切正常！

Webpack Encore - jQuery 插件不可见

Webpack Encore - jQuery plugins out of view

symfony

webpack

webpack-encore