jQuery插件和遗留应用程序
编辑该页面jQuery插件和遗留应用程序
Webpack内部,当您需要一个模块,它不(通常)设置一个全局变量。相反,它只返回一个值:
1 2
/ /加载jquery,但是*不*设置一个全球美元或jquery变量常量$ =需要(jquery的);在实践中,这将导致一些外部库的问题依赖jQuery是全球性的或如果你的JavaScript并不是通过Webpack处理(如你的模板有一些JavaScript),你需要jQuery。都将导致类似的错误:
1 2
未捕获ReferenceError: $没有定义在[…)未捕获ReferenceError: jQuery不是定义在[…]引起问题的解决取决于代码。
修复jQuery插件,希望jQuery是全球性的
jQuery插件通常期望通过jQuery已经可用美元或jQuery全局变量。为了解决这个问题,电话autoProvidejQuery ()从你的webpack.config.js文件:
1 2 3 4 5
/ / webpack.config。js安可/ /……+ .autoProvidejQuery ();重启后再来一次,Webpack将寻找所有未初始化美元和jQuery自动变量和要求jquery和设置这些变量。“重写”“坏”的代码是正确的。
在内部,这autoProvidejQuery ()方法调用的autoProvideVariables ()方法从安可。在实践中,它等于做:
1 2 3 4 5 6 7 8 9 10
再来一个/ /您可以使用这种方法来提供其他常见的全局变量,/ /“_”等“下划线”库.autoProvideVariables ({美元:jquery的,jQuery:jquery的,“window.jQuery”:jquery的}),/ /……;从Webpack之外访问jQuery JavaScript文件
如果你的代码需要访问美元或jQuery你是里面的一个文件处理Webpack /再来一次,你应该删除任何“美元是没有定义”错误,要求jQuery:var =需要美元(“jquery”)。
但是如果你也需要提供美元和jQuery变量之外的JavaScript文件由Webpack处理(如JavaScript仍然住在你的模板),您需要手动设置这些全局变量在一些JavaScript文件加载之前你的遗留代码。
例如,在你的app.js文件处理的Webpack和加载每一页,添加:
1 2 3 4 5 6 7
/ / app.js / /通常需要jQuery const =美元需要(“jQuery”);+ / /创建全球美元和jQuery变量+全球。$ =全球。jQuery =美元;的全球变量是一个特殊的方式设置的窗口变量。在网络环境中,使用全球和窗口是等价的,除了吗window.jQuery当使用不会工作autoProvidejQuery ()。换句话说,使用全球。
此外,一定要设置script_attributes.defer选项假在你的webpack_encore.yaml文件:
1 2 3 4 5
#配置/包/ webpack_encore.yamlwebpack_encore:#……script_attributes:延迟:假这将确保不一个推迟在你的属性脚本标签。有关更多信息,请参见动脚本< > < >主管和内部“推迟”属性
