如何在 browserify 项目中加载 jQuery mobile？

Question

我试图在我的 browserify 项目中加载 jquery-mobile 并收到错误，因为 this 指的是一个空对象而不是 window 对象。 Browserify 将 jquery-mobile 包装在它通常的包装器 (function(require, module, exports){ ... }) 中，但 this 不在 window 的范围内。

package.json

{
  "dependencies": {
    "animate.css": "^3.1.1",
    "backbone": "^1.1.2",
    "backbone-query-parameters": "git://github.com/jhudson8/backbone-query-parameters",
    "backbone.marionette": "^2.3.1",
    "backbone.radio": "^0.6.0",
    "backbone.storage": "^0.1.0",
    "backbone.syphon": "^0.5.0",
    "bootstrap": "^3.3.1",
    "browserify-swap": "^0.2.1",
    "handlebars": "^1.3.0",
    "jquery": "^2.1.3",
    "jquery-mobile": "^1.4.1",
    "lodash": "^2.4.1",
    "nprogress": "^0.1.6"
  },
  "browser": {
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
    "jquery-mobile": "./node_modules/jquery-mobile/dist/jquery.mobile.js"
  },
  "browserify-shim": {
    "bootstrap": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "jquery": "$",
    "jquery-mobile" : { "exports": "$.mobile", "depends": [ "jquery:$" ] }
  },
  "browserify-swap": {
    "@packages": [
      "underscore"
    ],
    "dist": {
      "underscore.js$": "lodash"
    }
  },
  "browserify": {
    "transform": [
      "babelify",
      [
        "hbsfy",
        {
          "extensions": [
            "hbs"
          ]
        }
      ],
      "browserify-swap",
      "browserify-shim"
    ]
  }
}

错误信息

jquery.mobile.js:14931 未捕获的类型错误：无法读取未定义的属性“jQuery”

然后我找到了moduleify

经过一番谷歌搜索后，我找到了moduleify，并尝试在我的 package.json 中为 jquery-mobile 使用它，但出现错误。这是我使用 moduleify 更新的转换配置：

  "browserify": {
    "transform": [
      "babelify",
      [
        "hbsfy",
        {
          "extensions": [
            "hbs"
          ]
        }
      ],
      [
        "moduleify",
        [
          "jquery.mobile"
        ]
      ],
      "browserify-swap",
      "browserify-shim"
    ]
  }

这样做会给我一个 moduleify 错误：

模块化/index.js:9 var rules = Array.isArray(aliases) ?别名：Object.keys(aliases).map(fu

有人对如何使this 引用window 有任何建议吗？我觉得我在正确的轨道上，但不知道下一步该做什么。谢谢！

Answer 1

在你做的第一种方法中：

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

我认为你需要这样做：

"jquery-mobile" : { "exports": "$.mobile", "depends": [ "jquery:jQuery" ] }