使用Browserify-shim配置通用jQuery插件？ [英] Configure a generic jQuery plugin with Browserify-shim?

问题描述

我使用browserify-shim，我想使用一个通用的jQuery插件。我已经浏览过Browserify-shim文档多次，我只是看起来不能理解发生了什么和/或它怎么知道放在哪里插件，附加到jQuery对象等。这里是我的package.json文件看起来像：

 browser：{
jquery：./src/js/vendor/jquery.js ，
caret：./src/js/vendor/jquery.caret.js
}，
 
browserify-shim：{
 caret：{
depend：[jquery：$] 
} 
} 
  

根据在browserify-shim文档中给出的例子，我不想指定一个导出，因为这个插件（和大多数如果不是所有的jQuery插件）附加到jQuery对象。除非我做错了以上，我不明白为什么它不工作（我得到一个错误，告诉我的功能是未定义的）当我使用它。见下面：

  $（'＃contenteditable'）。 // Uncaught TypeError：undefined不是一个函数
  

所以我的问题是，

解决方案

在重新浏览这个和尝试一些更多的jQuery插件事情，我终于把我的头围绕着browserify-shim正在做什么以及如何使用它。对我来说，有一个关键的原则，我不得不抓住，在我终于明白如何使用browserify-shim。对于两种不同的用例，基本上有两种方法使用browserify-shim：垫片。

背景

假设您要在标记中插入一个指令码标记原因如缓存，CDN等）。通过在标记中包括脚本标记，浏览器将击中脚本，运行它，并且最有可能在窗口对象（也称为JS中的全局）上附加一个属性。当然这可以通过 myGlobal 或 window.myGlobal 来访问。但是有一个语法的问题。它不遵循CommonJS规范，这意味着如果一个模块开始支持CommonJS语法（ require（）），你将无法利用它。 p>

解决方案

Browserify-shim允许您通过CommonJS指定一个全局变量c $ c> require（）语法。记住，你可以做 var whatever = global; 或 var whatever = window.global; code> var whatever = require（'global'）并期望它给你正确的lib /模块。不要对变量的名称感到困惑。它可以是任何任意的。你基本上使一个全局变量是一个局部变量。这听起来很蠢，但它的浏览器的JS的悲伤状态。同样，希望一旦lib支持CommonJS语法，它将永远不会通过全局对窗口对象附加。这意味着你必须使用 require（）语法并将其分配给一个局部变量，然后在任何需要的地方使用它。

注意：我发现在browserify-shim文档/示例中，变量命名稍有混乱。记住，关键是你想包含一个lib 如果它是一个正常行为的CommonJS模块。所以你最后做的是告诉browserify当你需要myGlobal require（'myGlobal'）你实际上只是想给予窗口对象的全局属性是 window.myGlobal 。

事实上，如果你对什么需求函数实际上有什么好奇，这很简单。下面是发生什么：

  var whatever = require（'mygGlobal'）; 
  

成为...

  var whatever = window.mygGlobal; 
  

公开

让我们看看我们如何在我们的browserify-shim配置中暴露一个模块/ lib。基本上，你告诉browserify-shim两件事。当你调用 require（）和它应该期望在窗口对象上找到的全局名称。所以这里是 global：* 语法的地方。让我们来看一个例子。我想在jQuery中作为index.html中的脚本标记，所以我得到更好的性能。这里是我需要做的在我的配置（这将是在package.json或外部配置JS文件）：

 browserify-shim：{
jquery：global：$
} 
  

这就是这意味着什么。我已经在其他地方包括jQuery（记住，browserify-shim不知道我们放置我们的标签，但它不需要知道），但我想要的是给予 $ 窗口对象上的属性，当我需要模块的字符串参数jquery。进一步说明。我也可以这样做：

 browserify-shim：{
thingy：global：$ 
} 
  

在这种情况下，我必须传递thingy参数到require函数，以获得一个jQuery对象的实例（它只是从窗口$ 窗口获取jQuery）：

  var $ = require（'thingy'）; 
  

是的，变量名可以是任何东西。 $ 与实际的jQuery库使用的全局属性 $ 没有什么特别的。虽然使用相同的名称以避免混淆是有意义的。这最终引用窗口对象上的 $ 属性，由 global：$

Shimming

$ p> Ok，这样几乎涵盖了曝光。 browserify-shim的另一个主要特性是匀场。那是什么？ Shimming与暴露除了而不是将HTML或模块包含在HTML标记中，类似于脚本标记，你可以告诉browserify-shim在本地获取JS文件的位置。不需要使用 global：* 语法。所以，让我们回到我们的jQuery示例，但这次假设我们不从CDN加载jQuery，而是简单地捆绑所有的JS文件。下面是配置的样子：

 browser：{
jquery：./src /js/vendor/jquery.js，//相对于package.json或外部shim JS文件的本地JS文件的路径
}，
browserify-shim：{
 jquery：$
}，
  

这个配置告诉browserify- shim加载jQuery从指定的本地路径，然后从窗口对象获取$属性，并返回，当你需要jQuery带有jquery的require函数的字符串参数。

 browser：{
thingy ：./src/js/vendor/jquery.js，//相对于package.json或外部shim JS文件的本地JS文件的路径
}，
browserify-shim ：{
thingy：$
}，
  

必须具有：

  var whatever = require（'thingy'）; 
  

我建议查看browserify-shim docs获取更多关于长期语法的信息 exports 属性以及 depends 属性，它允许你告诉browserify-shim如果lib依赖另一个lib /模块。我在这里解释适用于两者。我希望这可以帮助其他人努力了解browserify-shim实际上在做什么以及如何使用它。

匿名Shimming

匿名填充是browserify-shim的替代方法，它允许您使用browserify的 - 独立选项将像jQuery这样的库转换为UMD模块。

  $ browserify ./src/js/vendor/jquery.js -s thingy> ../dist/jquery-UMD.js 
  

如果将它放到脚本标记中，将jQuery添加到窗口对象 thingy 。当然也可以是 $ 或任何你喜欢的。

但是，需要嵌入到浏览器中的应用程序包中， var $ = require（./ dist / jquery-UMD.js）; ，您将在应用程序中有jQuery可用，而不将其添加到窗口对象。

这个方法不需要browserify-shim，并且利用jQuery的CommonJS感知，其中它寻找一个模块对象，并传递一个 noGlobal 标志到它的工厂，它告诉它不附加到窗口对象。

I'm using browserify-shim and I want to use a generic jQuery plugin. I have looked over the Browserify-shim docs multiple times and I just can't seem to understand what's going on and/or how it knows where to put plugins, attach to the jQuery object etc. Here's what my package.json file looks like:

"browser": {
  "jquery": "./src/js/vendor/jquery.js",
  "caret": "./src/js/vendor/jquery.caret.js"
},

"browserify-shim": {
  "caret": {
     "depends": ["jquery:$"]
  }
}

According the the example given on the browserify-shim documentation, I don't want to specify an exports because this plugin (and most if not all jQuery plugins) attach themselves to the jQuery object. Unless I'm doing something wrong above, I don't understand why it doesn't work (I get an error telling me the function is undefined) when I use it. See below:

$('#contenteditable').caret(5);  // Uncaught TypeError: undefined is not a function

So my question is, how does one configure a generic jQuery plugin (which attaches itself to the jQuery object) with browserify and browserify-shim?

解决方案

After revisiting this and trying some more things, I finally wrapped my head around what browserify-shim is doing and how to use it. For me, there was one key principle I had to grasp before I finally understood how to use browserify-shim. There are basically two ways to use browserify-shim for two different use cases: exposing & shimming.

Background

Let's say you want to just drop in a script tag in your markup (for testing or performance reasons like caching, CDN & the like). By including a script tag in the markup the browser will hit the script, run it, and most likely attach a property on the window object (also known as a global in JS). Of course this can be accessed by either doing myGlobal or window.myGlobal. But there's an issue with either syntax. It doesn't follow the CommonJS spec which means that if a module begins supporting CommonJS syntax (require()), you're not able to take advantage of it.

The Solution

Browserify-shim allows you to specify a global you'd like "exposed" through CommonJS require() syntax. Remember, you could do var whatever = global; or var whatever = window.global; but you could NOT do var whatever = require('global') and expect it to give you the right lib/module. Don't be confused about the name of the variable. It could be anything arbitrary. You're essentially making a global variable a local variable. It sounds stupid, but its the sad state of JS in the browser. Again, the hope is that once a lib supports CommonJS syntax it will never attach itself via a global on the window object. Which means you MUST use require() syntax and assign it to a local variable and then use it wherever you need it.

Note: I found variable naming slightly confusing in the browserify-shim docs/examples. Remember, the key is that you want to include a lib as if it were a properly behaving CommonJS module. So what you end up doing is telling browserify that when you require myGlobal require('myGlobal') you actually just want to be given the global property on the window object which is window.myGlobal.

In fact, if you're curious as to what the require function actually does, it's pretty simple. Here's what happens under the hood:

var whatever = require('mygGlobal');

becomes...

var whatever = window.mygGlobal;

Exposing

So with that background, let's see how we expose a module/lib in our browserify-shim config. Basically, you tell browserify-shim two things. The name you want it accessible with when you call require() and the global it should expect to find on the window object. So here's where that global:* syntax comes in. Let's look at an example. I want to drop in jquery as a script tag in index.html so I get better performance. Here's what I'd need to do in my config (this would be in package.json or an external config JS file):

"browserify-shim": {
  "jquery": "global:$"
}

So here's what that means. I've included jQuery somewhere else (remember, browserify-shim has no idea where we put our tag, but it doesn't need to know), but all I want is to be given the $ property on the window object when I require the module with the string parameter "jquery". To further illustrate. I could also have done this:

"browserify-shim": {
  "thingy": "global:$"
}

In this case, I'd have to pass "thingy" as the parameter to the require function in order to get an instance of the jQuery object back (which it's just getting jQuery from window.$):

var $ = require('thingy');

And yes, again, the variable name could be anything. There's nothing special about $ being the same as the global property $ the actual jQuery library uses. Though it makes sense to use the same name to avoid confusion. This ends up referencing the the $ property on the window object, as selected by the global:$ value in the browserify-shim object in package.json.

Shimming

Ok, so that pretty much covers exposing. The other main feature of browserify-shim is shimming. So what's that? Shimming does essentially the same thing as exposing except rather than including the lib or module in HTML markup with something like a script tag, you tell browserify-shim where to grab the JS file locally. There's no need to use the global:* syntax. So let's refer back to our jQuery example, but this time suppose we are not loading jQuery from a CDN, but simply bundling it with all the JS files. So here's what the config would look like:

"browser": {
  "jquery": "./src/js/vendor/jquery.js", // Path to the local JS file relative to package.json or an external shim JS file
},
"browserify-shim": {
  "jquery": "$"
},

This config tells browserify-shim to load jQuery from the specified local path and then grab the $ property from the window object and return that when you require jQuery with a string parameter to the require function of "jquery". Again, for illustrative purposes, you can also rename this to anything else.

"browser": {
  "thingy": "./src/js/vendor/jquery.js", // Path to the local JS file relative to package.json or an external shim JS file
},
"browserify-shim": {
  "thingy": "$"
},

Which could be required with:

var whatever = require('thingy');

I'd recommend checking out the browserify-shim docs for more info on the long-hand syntax using the exports property and also the depends property which allows you to tell browserify-shim if a lib depends on another lib/module. What I've explained here applies to both. I hope this helps others struggling to understand what browserify-shim is actually doing and how to use it.

Anonymous Shimming

Anonymous shimming is an alternative to browserify-shim which lets you transform libs like jQuery into UMD modules using browserify's --standalone option.

$ browserify ./src/js/vendor/jquery.js -s thingy > ../dist/jquery-UMD.js

If you dropped that into a script tag, this module would add jQuery onto the window object as thingy. Of course it could also be $ or whatever you like.

If however, it's requireed into your browserify'd app bundle, var $ = require("./dist/jquery-UMD.js");, you will have jQuery available inside the app without adding it to the window object.

This method doesn't require browserify-shim and exploits jQuery's CommonJS awareness where it looks for a module object and passes a noGlobal flag into its factory which tells it not to attach itself to the window object.

这篇关于使用Browserify-shim配置通用jQuery插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！