顺序依赖：jQuery未使用browserify定义 [英] order dependencies: jQuery is not defined with browserify

问题描述

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

I am trying to use a plugin that is in /js/lib/stellar.jquery.js:

var $ = require('jquery');

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

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

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

When I run this though I get jQuery is not defined. I think the stellar jQuery plugin is loading before the jq library. At the bottom of the stellar plugin there's this code:

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

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

Changing "jQuery" to "$" does not work either, gives "$ is not defined"

推荐答案

无需指定依赖项的顺序。

There is not any need to specify order for dependencies.

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

Because neither jQuery nor your plugin support CommonJS modules, you need to shim them to make them compatible with the browserify modules concept.

npm install browserify-shim --save-dev

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

add alias for jQuery and your plugin to your package.json (optional, but recommended)

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

添加browserify shim转换以通过添加到您的包中来启用填充。 json

add browserify shim transformation to enable shimming by adding to your package.json

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

配置垫片

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

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

Consider, in dependencies configuration before colon you should specify file name, NOT SHIMMED MODULE NAME!!! after colon you should specify identifier, which is expected by your module in global namespace.

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

Then, require your plugin to initialize it's code before usage

'use strict';

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

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

这篇关于顺序依赖：jQuery未使用browserify定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！