How to run multiple versions of Zepto.js on one page?

This should work, just like jQuery does it:

<script src="zepto1.0.js"></script>
<script>
    var zep10 = window.Zepto;
</script>

<script src="zepto0.8.js"></script>
<script>
    var zep08 = window.Zepto;
</script>

Zepto does not need to be "compiled". It just needs to be placed into a variable, like jQuery and MooTools go into $ by default. You can set the most used version of Zepto into $ too if you like:

<script src="zepto1.0.js"></script>
<script>
    var $ = window.Zepto;
</script>

Off-course you need to trigger your commands from those objects from then on.

For version 1.0 you would just use your normal $.() operations. But for version 0.8 you would use zep08.() to call actions.

Note

From the Zepto homepage (http://zeptojs.com):

Zepto will only set the $ global to itself if it is not yet defined. There is no Zepto.noConflict method.

So if you already loaded jQuery or MooTools, it will not break the $ binding, as long as you have those libraries load before Zepto does. Otherwise you will still get overwrites.

Tests

Also check this out: http://jsperf.com/qwery-vs-jquery-vs-mootools-selector-engines/11. On Chrome and Safari jQuery wins big from Zepto. So you might have a lighter "initial load" with Zepto, but it seems jQuery wins performance-wise.

I've tested on Safari 6.0.3 on Mac OS X 10.8.3 with these results:

Jeesh / ID

• Jeesh("#n-contents");
• 40,136 | ±3.78% | 95% slower

jQuery / ID

• jQuery("#n-contents");
• 765,799 | ±4.36% | fastest

Zepto / ID

• Zepto("#n-contents");
• 348,956 | ±4.89% | 55% slower

Jeesh / class

• Jeesh(".firstHeading");
• 40,748 | ±3.96% | 95% slower

jQuery / class

• jQuery(".firstHeading");
• 306,591 | ±4.31% | 60% slower

Zepto / class

• Zepto(".firstHeading");
• 284,822 | ±3.92% | 63% slower