完全混淆 browserify 和 browserify-shim 应该如何工作

Question

好吧，我开始简单地了解发生了什么： 所以我有一个依赖于 jQuery 的插件，从那里开始，我会在此基础上添加更多。然而，我唯一能开始工作的就是 jQuery 本身。

这是我从终端得到的错误：

[13:24:27] { [Error: Cannot find module 'jquery.mixitup.js' from '/Users/antonioortiz/Dropbox/developer_folder/browserify_app/app/_js']

这是我的设置：

package.json

"main": "./app/_js/app.js", //entry point for your app
"browserify": {
    "transform": [
        "browserify-shim", // Is this supposed to help with the non `node_module` pacakages?
         "debowerify"
    ]
},

"browser": { // This gives browserify the location of your plugin right?
    "mixitup": "./bower_components/mixitup/src/jquery.mixitup.js"
},

"browserify-shim": { 
    "jQuery": "global:jQuery",
    "mixitup": {
        "depends": "jQuery",
        "exports": "mixitup"

    }

在基本层面上，browserify-shim 应该完成获取非“node_modules”的任务，对吧？有没有人介意直接设置记录，因为对于我的生活，我无法正确配置它。但更重要的是，我很想知道发生了什么！

谢谢！

更新

所以如果你使用它就会出现 var mixitup = require('./../bower_components/mixitup/build/jquery.mixitup.min.js'); 在您的 app.js 文件中有效。但是，browserify-shim 的意义何在。我认为它应该允许您使用缩短的约定：

在我的情况下，它会是：

var mixitup = require('jquery.mixitup.js');

更新

根据 Nick 的建议尝试了这个，当然我没有使用 proxyquireify。任何人都有另一种方法。因为我还在杂草丛中……

"browser": {
        "jQuery": "global:jQuery",
        "mixitup": "/app/bower_components/mixitup/src/jquery.mixitup.js",
        "Mustache": "/app/bower_components/jquery-Mustache/jquery.mustache.js",
        "mustache": "mustache"
    }

但是没有成功...

还收到一条似乎比上一条更神秘的错误消息：

{ [Error: ENOENT, lstat '/app']
  errno: 34,
  code: 'ENOENT',
  path: '/app',
  stream: 

Answer 1

Browserify-shim 允许您根据您提供的映射导出模块。因此，在您的示例中，您应该通过 mixitup 要求您的模块，例如var mixitup = require('mixitup');。因为您正在寻找一个名为jquery.mixitup.js 的模块，所以您收到了一个模块错误。有关节点模块系统如何工作的更多信息here。

您不需要exports，因为 browserify-shim 默认导出别名 (docs)：

"mixitup": {
  "depends": "jQuery"
}

如果您使用的是browserify-shim，也不需要使用debowerify。