jQuery插件和遗留应用程序

在Webpack中，当你需要一个模块时，它就会这样做不(通常)设置一个全局变量。相反，它只返回一个值:

               1 2
               //加载jquery，但不设置全局变量$或jquery常量$ =需要（jquery的）;
              

在实践中，这将导致一些外部库的问题依赖jQuery是全局的或如果你的JavaScript不是通过Webpack处理的(例如，你的模板中有一些JavaScript)，你需要jQuery。两者都会导致类似的错误:

               1 2
               Uncaught ReferenceError: $没有在[…]jQuery没有定义在[…]
              

修复方法取决于导致问题的代码。

修复jQuery插件全局化的问题

jQuery插件通常认为jQuery已经可以通过＄或jQuery全局变量。要修复此问题，请调用autoProvidejQuery ()从你的webpack.config.js文件:

                1 2 3 4 5
                // webpack.config.js Encore //…+ .autoProvidejQuery ()；
               

重启Encore后，Webpack将寻找所有未初始化的＄而且jQuery变量，并自动要求jquery为你设置这些变量。它“重写”“坏的”代码以使其正确。

在内部,这autoProvidejQuery ()方法调用autoProvideVariables ()方法。在实践中，这相当于做:

                1 2 3 4 5 6 7 8 9 10
                再来一个//你可以使用这个方法来提供其他通用的全局变量，//例如'_'用于'下划线'库.autoProvideVariables ({＄：jquery的，jQuery：jquery的，“window.jQuery”：jquery的}),/ /……；
               

从Webpack JavaScript文件外部访问jQuery

如果你的代码需要访问＄或jQuery如果你在Webpack/Encore处理的文件中，你应该使用jQuery删除任何“$ is not defined”错误:Var $ = require('jquery')．

但如果还需要提供访问权限＄而且jQuery在Webpack处理的JavaScript文件之外的变量(例如仍然存在于你的模板中的JavaScript)，你需要在一些JavaScript文件中手动设置这些全局变量，在你的遗留代码之前加载。

例如，在你的app.js由Webpack处理并加载到每个页面的文件，添加:

                1 2 3 4 5 6 7
                // app.js // require jQuery通常const $ = require(' jQuery ');+ //创建全局$和jQuery变量+全球。$ =全球．jQuery = $;
               

的全球变量是一种特殊的设置方法窗口变量。在web环境中，使用全球而且窗口是相等的，除了window.jQuery使用时不能工作autoProvidejQuery ()．换句话说，就是使用全球．

此外，请确保设置script_attributes.defer选项假在你的webpack_encore.yaml文件:

                1 2 3 4 5
                #配置/包/ webpack_encore.yamlwebpack_encore:#……script_attributes:延迟:假
               

这将确保有不一个推迟属性脚本标签。有关更多信息，请参见移动