用npm jQuery和非npm插件实现浏览器化

Question

我正在使用褐化捆绑前端代码。到目前为止，这是很棒的，但我一直很难混合npm和非npm软件包。例如，在非CJS版本的jQuery插件中使用npm版本的jQuery插件。

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

有没有比我现在更干净的方法来做这件事？

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

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"
    ]
  }
}

Answer 1

我将这样做：

1. 使用脱脂包括bower中可用的库，在您的情况下是jquery，jquery-验证。
2. 使用npm包中附带的jquery，它可以在这里获得https://github.com/jquery/jquery

因此，我暂时也要去掉褐化-希姆。

Answer 2

browser指令只是一个别名，用于指定编写jquery时所需的内容。jquery的默认设置是node_modules中的路径，所以您的行：

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

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

否则，我认为没有更干净的方法来实现这一点。正如您所说的，您需要使用Browserify Shim来对那些非CJS jQuery插件进行修改，并且您这样做是正确的。

Answer 3

您缺少正确定义依赖项(例如，将"$“设置为jquery声明)：

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