Browserify 和全局 jQuery答案

【问题标题】：Browserify and global jQueryBrowserify 和全局 jQuery
【发布时间】：2016-03-20 00:31:29
【问题描述】：

我在我的 WordPress 主题中使用 browserify。我遇到的问题是我想将 jQuery 包含在“WordPress 方式”（即wp_enqueue_script('jquery')）中，以便所有依赖于 window.jQuery 的 WordPress 插件都被定义（并包含在 <head> 中）继续工作。

我已经设法让 browserify 忽略 jQuery 要求，只需在我的 Gulpfile.js 中设置 browserify(conf).ignore('jquery')，但这会导致脚本尝试将 jQuery 包含在“浏览器化方式”中失败。

我怎样才能拥有一个全局 jQuery 对象（包含在它自己的头部 <script> 元素中），以便 WP 插件工作，并且仍然有 var $ = require('jquery') 工作的代码？有可能吗？

更新：我想我已经更接近了。我现在在<head> 中“通常”包含 jQuery。我已经在我的 browserify 调用中设置了 ignore('jquery') 以避免它也出现在我的捆绑文件中，并且我正在使用 browserify-shim （这是我稍微迷路的地方）来（我想？）这样当你做require('jquery') 它使用全局window.jQuery 对象吗？

如果我这样做的话，这似乎可以在我自己的代码中工作：

var foo = require('jquery');

console.dir(foo);

我确实得到了一个 jQuery 对象，但我的捆绑文件只有几 kb，这表明 jQuery 没有捆绑在其中。然而，当我 npm install jquery-cycle 并从我的脚本中要求它时，我从 jquery 循环代码中得到一个 JS 错误，即 $ 未定义。奇怪的是，循环脚本完全完成了我所做的事情，即var $ = require('jquery')，但其中$根本不是一个jQuery对象，而只是一个空的对象。这是为什么呢？

更新 2：出于某种原因，如果我将循环插件的 require() 更改为需要它工作的确切 JS 文件。 IE 我已经将require('jquery-cycle')（基本上是说$ is undefined）改成了require('../node_modules/jquery-cycle/index.js')。

我当然更愿意以“正常”的方式要求事物。任何想法为什么拒绝工作？

更新 3：经过大量挖掘，我终于发现需要将 global: true 设置为 transform() 调用，以便依赖项依赖项也使用填充的 jQuery。我终于在这里找到了这个解决方案：Shimming dependencies of dependencies with browserify-shim

【问题讨论】：

您是否正在使用 Wordpress 在同一主机上编译 gulp？
如果这就是你的意思，我在本地 atm 做所有事情？
您甚至可以使用本地不同的主机来运行 gulp 来编译 Wordpress 的前端文件和 http 服务器。
这里有一个很好的帖子：webdevstudios.com/2015/09/03/modernize-wordpress-javascript
@Pete 对此表示感谢。我确实设法解决了这个问题，只是忘了回答我自己的问题。我基本上做了他在你链接到的文章中所做的事情。

标签： jquery wordpress browserify

【解决方案1】：

我确实得到了一个 jQuery 对象，但我的捆绑文件只有几 kb，这表明 jQuery 没有捆绑在其中。但是，当我 npm install jquery-cycle 并从我的脚本中要求它时，我从 jquery 循环代码中得到一个 JS 错误，即 $ 未定义。 imo 奇怪的部分是循环脚本完全按照我的方式执行，即 var $ = require('jquery') 但其中 $ 根本不是 jQuery 对象，而只是一个空对象。这是为什么呢？

如果页面上有多个 jQuery，则必须添加一个全局变量：

var $ = jQuery;

【讨论】：