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

Posted 2023-03-08

【中文标题】将 browserify 与 npm jQuery 和非 npm 插件一起使用

【英文标题】：Using browserify with npm jQuery and non-npm plugins

【发布时间】：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": "[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"
    ]
  

【问题讨论】：

我目前正在处理同样的问题。别名 jquery 和 ./node_modules/jquery/dist/jquery.js 是否会在您的最终包中创建 jQuery 的副本？或者，package.json 有什么问题？

@MichaelMartin-Smucker 工作正常（没有重复的jquery），但我不喜欢通过 shim 配置手动配置——我很懒 :)。祝你好运！

非常感谢！这个问题回答了我的问题。我无法让 jquery.mmenu 工作，但您的代码向我展示了如何工作。 +1 用于在问题中显示工作代码 :)

@NickTomlin 我知道这是一个老问题，但该代码是否像您所拥有的那样工作？还是您的 jQuery 插件不能那样工作？

@YPCrumble 代码按原样工作。我只是想要一种更清洁的方式来做到这一点:)

【参考方案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 插件，而且你的做法是正确的。