如何使ES6捆绑包中的jQuery可用于HTML中加载的外部脚本? [英] How do I make jQuery from a ES6 Bundle available to external scripts loaded in the HTML?
问题描述
在一个网站上，我将所有带有Gulp的javascript捆绑到一个捆绑文件中.这包括jQuery，我将其导入到需要它的所有JS文件中.
On a website, I bundle all the javascript with Gulp into one bundle file. This includes jQuery, which I import into all the JS files that require it.
我直接在HTML中包含Google跟踪代码管理器(GTM).但是，某些自定义标签需要jQuery，根据浏览器控制台的输出，jQuery是未定义的.我认为jQuery没有暴露在捆绑包之外.
I include the Google Tag Manager (GTM) directly in the HTML. However, some of the custom tags require jQuery, which is undefined according to browser console output. I assume jQuery is not exposed outside the bundle.
如何从捆绑包中公开jQuery，以便外部脚本(例如GTM)可以使用它?
推荐答案
解决方案
jqfundamental的 jQuery基础指南:
import $ from 'jquery';
// make jquery available to all imports using `window` to load jQuery
window.jQuery = window.$ = $;
在这两行中，通过import加载的jQuery版本(在我的情况下，是我在Node package.json中指定的版本)将分配给window对象，大多数jQuery插件和GTM都通过该对象自定义标签会加载jQuery.
With these two lines, the jQuery version loaded via import (in my case the one I specified in my Node package.json) will be assigned to the window object, from which most jQuery plugins as well as GTM custom tags load jQuery.
我将此语句放在主要js文件的顶部.这样，我确保所有导入的jQuery插件也可以通过window访问jQuery.
I put this statement on top of my main js file. This way I make sure that all imported jQuery plugins can access jQuery via window, as well.
对于每个不完全了解它的人:window对象的所有属性都可以使用其键名进行全局访问:
For everyone not completely aware of it: All properties of the window object are globally available with their key name:
window.foo = 'someValue';
console.log(foo);
// outputs 'someValue' even if used in a different scope/file/module
如果这不起作用
检查插件代码的最后一行:一些插件从this.jQuery而不是window.jQuery加载jQuery.
If this doesn't work
Check the last line of your plugin code: Some plugins load jQuery from this.jQuery instead of window.jQuery.
通常，顶级JS脚本中的this指向window，因此上述方法有效.但是，在ES6模块中-并且这样的捆绑包代码在浏览器中运行-this是undefined(请参阅此
Usually, this in JS scripts on the top level points to window, so above approach works. However, in ES6 modules - and as such the bundle code is run in the browser - this is undefined (see this exploringjs table for reference).
除了调整插件代码以使用window.jQuery之外，我没有找到一个好的解决方案.请参阅与此相关问题 (在撰写本文时尚未答复).
I haven't found a good solution other than adjusting the plugin code to use window.jQuery. See this related question (unanswered at the time of writing).
偶然发现了此问题，它很好地解释了这种行为的原因: jQuery代码包含对定义的module和对象的条件测试:
Stumbled upon this issue which explains the reason for this behavior quite well: The jQuery code contains a conditional testing for module being defined and an object:
if ( typeof module === "object" && typeof module.exports === "object" ){
// set jQuery in `module`
} else {
// set jQuery in `window`
}
在Nodejs中，module甚至在浏览器中也是一个对象，因此jQuery在默认情况下不是全局可用的，而仅在当前导入范围内可用.
In Nodejs, module is an object even in the browser, thus jQuery is not globally available by default, but only in the current scope of the import.
这篇关于如何使ES6捆绑包中的jQuery可用于HTML中加载的外部脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
