使用带有 jQ​​uery 插件的 Browserify

Posted 2023-03-07

【中文标题】使用带有 jQ​​uery 插件的 Browserify

【英文标题】：Using Browserify with jQuery Plugins

【发布时间】：2014-09-02 15:36:18

【问题描述】：

一些简短的背景：我正在使用 browserify 和 browserify-shim（以及 gulp 构建）来创建一个网络应用程序。在此问题之前，我是来自 npm 的 requireing jquery，所以我没有任何问题。一旦我开始进行一些优化，我就意识到包含 jQuery 的捆绑包有多么庞大。所以现在我从 CDN 中获取带有 script 标签的 jQuery 并将其放在 bundle.js 文件之前。但是我在将 jQuery 声明为全局并在 browserify 和 browserify-shim 中正确填充我的 jQuery 插件时遇到问题。当我运行 gulp 构建时，我不断收到相同的错误：

[gulp] gulp-notify: [Compile Error] module "jquery" not found from "/Volumes/Chetan/Users/cshenoy/Projects/urbanstems-node/app/plugins/jquery.inview.js"

似乎 browserify-shim 并没有意识到 jQuery 是一个全球性的。

作为参考，我使用的是inview plugin。

这是我的 package.json 和相关部分

"browser": 
  "inview": "./app/plugins/jquery.inview.js"
,
"browserify-shim": 
  "jquery": "global:jQuery",
  "inview": 
    "depends": [
      "jquery"
    ]
  

让我知道我还可以包括什么来帮助诊断错误。

【问题讨论】：

我对反方向感到好奇。当您从 npm require('jquery') 时，您如何能够将其全局公开以使插件仍然有效？

我从 npm 安装它时没有全局公开它。 browserify-shim 中 jquery 的值是 $ 或 jQuery。然后所有依赖于 jQuery 的插件将在它的下方列出，并带有依赖字段列表 jquery。

【参考方案1】：

原来你不需要在browserify-shim 下声明每个jQuery 插件，如果它只依赖于jQuery。我刚刚删除了 inview 条目，一切正常。