将 browserify 与 npm jQuery 和非 npm 插件一起使用答案

【问题标题】：Using browserify with npm jQuery and non-npm plugins将 browserify 与 npm jQuery 和非 npm 插件一起使用
【发布时间】：2014-08-02 21:15:25
【问题描述】：

我正在使用browserify 来捆绑前端代码。到目前为止一切都很好，但是我在混合 npm 和非 npm 包时遇到了困难。例如，使用 npm 版本的 jQuery 和非 CJS 版本的 jQuery 插件。

我目前的解决方案是使用package.json中的browser键指向jQuery的dist，然后使用browserify-shim将其添加为插件的依赖项。

有没有比我目前拥有的更清洁的方法？

编辑：我目前正在尝试使用 npm 和 package.json 来管理我的所有依赖项，所以我不想在这个项目上使用 bower。叫我疯了:)

Package.json

{
  "dependencies": {
    "jquery": "~2.1.0",
    "browserify": "latest",
    "browserify-shim": "^3.5.0",
    "jquery-waypoints": "git@github.com:imakewebthings/jquery-waypoints.git",
    "jquery-validation": "git://github.com/jzaefferer/jquery-validation"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "jquery-waypoints": "./node_modules/jquery-waypoints/waypoints.js",
    "jquery-validate": "./node_modules/jquery-validation/build/release.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "jquery-waypoints": {
      "depends": [
        "jquery"
      ]
    },
    "jquery-validate": {
      "depends": [
        "jquery"
      ]
    }
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  }
}

【问题讨论】：

我目前正在处理同样的问题。别名 jquery 和 ./node_modules/jquery/dist/jquery.js 是否会在您的最终包中创建 jQuery 的副本？或者，package.json 有什么问题？
@MichaelMartin-Smucker 工作正常（没有重复的jquery），但我不喜欢通过 shim 配置手动配置——我很懒 :)。祝你好运！
非常感谢！这个问题回答了我的问题。我无法让 jquery.mmenu 工作，但您的代码向我展示了如何工作。 +1 用于在问题中显示工作代码 :)
@NickTomlin 我知道这是一个老问题，但该代码是否像您所拥有的那样工作？还是您的 jQuery 插件不能那样工作？
@YPCrumble 代码按原样工作。我只是想要一种更清洁的方式来做到这一点:)

标签： jquery node.js browserify browserify-shim

【解决方案1】：

我会这样做：

使用 debowerify 包含 bower 中可用的库，在您的情况下是 jquery-waypoints、jquery-validation
使用 npm 包中的 jquery，可以在这里找到https://github.com/jquery/jquery

因此，我也会暂时删除 browserify-shim。

【讨论】：

感谢您的回答。我目前正在尝试仅使用 npm 路线，所以我想避免使用凉亭。我已经更新了我的问题以澄清。
我尝试了建议的方式，但 jquery-mobile 没有运气。 Debowerify 从 bower 引入了软件包，但 deamdify 不知道如何从 amd 模块中构建它。它出现了意外的令牌错误。嗯...

【解决方案2】：

我认为您没有正确定义依赖项（例如，将“$”设置为您的 jquery 声明）：

"plugin": {
  "exports": "plugin",
  "depends": [
    "jquery:$"
  ]
},...

【讨论】：

感谢您的回答，但我不太清楚您的意思？您能否详细说明并为您的 sn-p 提供更多背景信息？
呃。在寻找其他解决方案时偶然发现了您的问题，因此阅读速度太快了。只需重新阅读您的问题并注意到您实际上可以使用它，但不喜欢通过 browserify-shim 手动摆弄（我曾假设它不起作用，可能是因为您没有完全指定要分配的内容$/jQuery 在你的插件中。看看你是如何工作的，你和我在同一条船上：“啊，另一个 jQuery 插件，我必须让 browserify 友好。”不幸的是，没有其他方法可以我发现没有使用不同的包管理器。
明白了。这就说得通了。很高兴知道别人能感受到我的痛苦。如果您找到更好的方法，请更新:)

【解决方案3】：

browser 指令只是一个别名，用于在您编写 jquery 时指定您想要的内容。 jquery 的 default 是 node_modules 中的路径，所以你的行：

"jquery": "./node_modules/jquery/dist/jquery.js",

... 是多余的，您可以删除它，因为当您在 Browserify Shim 配置中写入 "depends": ["jquery"] 时，jquery 已经指向 ./node_modules/jquery/dist/jquery.js，而您的 browser 键中没有该行。事实上，您可能完全删除 browser 指令，您必须检查那些 jQuery 插件的 package.json 文件中的配置，但很可能它们已经像您拥有它们一样被别名，没有 browser 覆盖.

否则我认为没有更简洁的方法来实现这一点。就像你说的，你需要使用 Browserify Shim 来填充那些非 CJS jQuery 插件，而且你的做法是正确的。

【讨论】：