使用browserify和npm jQuery以及非npm插件

Question

我正在使用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": "[e-mail]: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"
    ]
  }
}

- Nick Tomlin

---

我目前正在解决同样的问题。使用 ./node_modules/jquery/dist/jquery.js 别名来代替 jquery 是否会在最终捆绑包中创建重复的 jQuery 副本？或者，package.json 中有什么问题？ - Michael Martin-Smucker

@MichaelMartin-Smucker，它运行良好（没有重复的jquery），但我不喜欢通过shim配置手动配置事物 - 我很懒 :）。祝你好运！ - Nick Tomlin

非常感谢！那个问题解答了我的疑问。我无法让jquery.mmenu工作，但您的代码向我展示了如何操作。因为在问题中展示可行的代码而给你点赞 :) - xlttj

@NickTomlin 我知道这是一个老问题，但你的代码是否像你想象的那样工作？或者问题在于你的jQuery插件不能像那样工作？ - YPCrumble

@YPCrumble 这段代码本身就能运行。我只是想找一种更简洁的方式来做它 :) - Nick Tomlin

@NickTomlin 我能看到的唯一方式是你的 browser 指令可能不必要。除此之外，这就是正确的代码。 - YPCrumble

Answer 1

我会这样做：

1. 使用debowerify，将可在bower中获得的库包含进来，在你的情况下是jquery-waypoints, jquery-validation

2. 使用npm包中提供的jquery，可以在这里找到https://github.com/jquery/jquery

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

- Ian Lim

---

感谢您的回答。我目前正在尝试只使用npm，所以我想避免使用bower。我已经更新了我的问题以澄清。 - Nick Tomlin

我尝试了建议的方法，但在jquery-mobile上没有运气。Debowerify从bower中引入了包，但deamdify不知道如何将其构建为一个amd模块。它出现了意外的标记错误。嗯... - Glitches

Answer 2

browser指令只是一个别名，用于指定您在编写jquery时想要的内容。对于jquery，默认值是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插件，而你正在正确地做到这一点。

- YPCrumble

Answer 3

你可能没有正确定义依赖项（例如将“$”设置为jquery声明）：

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

- Ted

---

谢谢你的回答，但我不太确定你的意思是什么？你能详细解释一下，并给出一点更多关于你代码片段的背景吗？ - Nick Tomlin

嗯，我在查找另一个解决方案时偶然看到了你的问题，所以读得太快。重新阅读了一遍你的问题，注意到你实际上已经让它工作了，但不喜欢通过browserify-shim手动操作（我曾经认为它没有工作，可能是因为你没有完全指定要分配给$/jQuery的内容）。既然你已经让它工作了，那么你和我一样处于同一艘船上：“啊，又是一个我必须使其符合Browserify标准的jQuery插件。” 不幸的是，除了使用其他软件包管理器外，我没有找到其他途径。 - Ted

明白了，这很有道理。很高兴知道还有其他人和我一样感受到了痛苦。如果你找到更好的方法，请更新一下 :) - Nick Tomlin