Webpack Encore-jQuery插件不可见 [英] Webpack Encore - jQuery plugins out of view

查看：83
本文介绍了Webpack Encore-jQuery插件不可见的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I'm trying to use SensioLab Webpack Encore in my Symfony 3.3 project, but after adding few scripts to webpack, my script doesn't see functions of other scripts.

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 %}

结果，我得到了:

未捕获的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)

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

推荐答案

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

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

如何在Symfony Webpack Encore中提供jQuery

autoProvideVariables不能像autoProvideVariables一样工作，因此请执行以下步骤:

autoProvideVariables doesn't work such as autoProvideVariables, so do next steps:

    webpack.config.json中的

  1. 删除所有提供程序:

  1. in webpack.config.json remove all providers:

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

在捆绑包中创建文件，例如jquery.init.js:

Create file in your bundle, for example 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();

仅此而已....一切正常！

这篇关于Webpack Encore-jQuery插件不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆