顺序依赖：jQuery未使用browserify定义

Question

我正在尝试使用/js/lib/stellar.jquery.js的插件：

var $ = require('jquery');

require('./lib/stellar.jquery')

$(function(){
    $.stellar();
});

当我运行这个虽然我得到jQuery没有定义。 我认为恒星jQuery插件是在jq库之前加载的。 在stellar插件的底部有这个代码：

    ...
    // Expose the plugin class so it can be modified
    window.Stellar = Plugin;
}(jQuery, this, document));

将“jQuery”更改为“$”也不起作用，给出“$ is not defined”

Answer 1

无需指定依赖项的顺序。

因为jQuery和你的插件都不支持CommonJS模块，所以你需要对它们进行填充以使它们与browserify模块概念兼容。

npm install browserify-shim --save-dev

为你的package.json添加jQuery和你的插件的别名（可选，但推荐）

"browser":{
  "customPlugin": "path/to/custom/plugin",
  "jquery": "./node_modules/jquery/dist/jquery.js"
}

添加browserify shim转换以通过添加到package.json来启用填充

"browserify": {
    "transform": [
      "browserify-shim"
    ]
}

配置垫片

"browserify-shim": {
  "jquery"    :  "jQuery",
  "customPlugin" :  { "depends": [ "jquery:jQuery" ] },
}

考虑一下，在冒号之前的依赖关系配置中你应该指定文件名，而不是SHIMMED MODULE NAME !!! 在冒号之后，您应该指定标识符，这是您的模块在全局命名空间中所期望的。

然后，要求您的插件在使用前初始化它的代码

'use strict';

require('customPlugin');
var $ = require('jQuery');

$('.some-class-selector').myCustomPlugin();

Answer 2

global.jQuery = require("jquery")