顺序依赖: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")