I want to incorporate a minified javascript library (for example http://sizzlejs.com/) into my own non minified javascript library. The reason is that my library plugs into other websites and I don't want to ask them to include the extra library (sizzle) as well.
Is there a way to include a minified library in a non minified library and have them both in one js file?
The simplest approach would be to just copy and paste the code from the minified library directly into the top of your file.
You could just copy the sizzle code into your own code. That is, at the top or bottom of your js file. This is how jQuery include sizzle in their code.
Or you could dynamically add a script tag element to the "head" of the document in your own library which has src set to the sizzle minified file (look at how jQuery includes scripts in its AJAX routines for an example).
If you include dynamically, you might find that it's actually faster, as you can probably link to sizzle from the google servers, and the user may well have it already cached in their browser (jQuery actually recommend including their own library in this way)
Related
In Domino 9 dojo comes with the AMD loader which seems to be interfering with loading of external javascript libraries eg Jquery Mobile, Fullcalendar.
The quick solution is to load these external libraries before the dojo libraries. But this requires the Xpage property: "Use runtime optimized Javascript and CSS resources" to be set.
The problem with this is that images referenced in compressed css files will break. Eg font-awesome, jqueryui.
This is a major flaw in the product that these references have to be recoded in the css files for it to work.
So the question is can eg fulcalendar and it's dependencies be loaded via AMD in Xpages so we don't have to recode all css files referencing images?
What exatly is your problem with loading jquery. I am loading jquery and other js libraries like select2, dgrowl, jgrid without any problems
When using the "Use runtime optimized Javascript and CSS resources" setting, there are some additional options you can set directly in xsp.properties to stop aggregation of CSS files like font-awesome. In this instance use 'xsp.resources.aggregate.css=false' and you will be good to go.
See http://lotusnotus.com/lotusnotus_en.nsf/dx/xpages-performance-dojo-widgets-and-resource-aggregation.htm for full details of all of the options.
With GWT I can use JSNI to include external libraries like JQuery.
If I use an external library with JSNI what does the GWT compiler do?
Does it include the hole full size JavaScript library?
Does it include only the code of the library that have been used?
Assuming you copied the whole jQuery script into a JSNI method (ouch!), then GWT will do its best to optimize it, including pruning dead code. Results would really depend on the JS code though, not everything can be statically analyzed to determine what code will or won't be used.
My problem is short and simple. I've got the basic example set up as described by the Ext JS team (http://docs.sencha.com/extjs/4.1.3/#!/guide/application_architecture) but currently it only works with ext-debug.js.
I'd like to use the ext.js-core itself, but that doesn't allow me to use dynamic loading, thus forces me to use ext-all.js, which is a huge honking script of which 80% I don't need (abstractables and extended classes not included).
It is possible to write my Ext.Application in ext-debug.js for development and then switch live to ext.js?
/edit
I found this wonderful documentation, which doesn't explain why a minified version of ext-debug (thus ext.js) doesn't work, but there you go.
ext-debug.js - This file is only for use during development. It provides the minimum number of core Ext JS classes needed to get up and running. Any additional classes should be dynamically loaded as separate files as demonstrated above.
ext.js - same as ext-debug.js but minified for use in production. Meant to be used in combination with your application's app-all.js file. (see section 3)
ext-all-debug.js - This file contains the entire Ext JS library. This can be helpful for shortening your initial learning curve, however ext-debug.js is preferred in most cases for actual application development.
ext-all.js - This is a minified version of ext-all-debug.js that can be used in production environments, however, it is not recommended since most applications will not make use of all the classes that it contains. Instead it is recommended that you create a custom build for your production environment as described in section 3.
The key is here:
Meant to be used in combination with your application's app-all.js file
Your application(and all the dependencies) should be compiled into single file app-all.js (you can do it with help of the sencha sdk). Your html should look like the following:
<script type="text/javascript" src="path/to/extjs/ext.js"></script>
<script type="text/javascript" src="path/to/app-all.js"></script>
I'd like to use the ext.js-core itself, but that doesn't allow me to use dynamic loading
There shouldn't be any dynamic loading as all the javascript is compiled into those two files (ext.js and app-all.js).
Use ext-dev.js instead of ext-debug.js to get dynamic loading and comments. Use Sencha Cmd to build the production JavaScript and CSS files.
I have an idea where I would like to load jQuery (via CDN) into a JavaScript file that when called on the page loads jQuery via the CDN and also loads the JavaScript file. so instead of doing:
<script>jquery</script>
<script>myscript></script>
I would just do:
<script>myscript</script>
and then jQuery would just load.... Because in the myscript.js I would be doing something like: call jQuery via CDN .... do js code here that uses jQuery ...
Although we can hope for a module solution in a near future, JavaScript currently doesn't allow for simple script dependency management.
You have a few solutions, the two main ones are :
you write in your code a script element
you use a library which manages dependencies like RequireJS
If you want to use RequireJS, then you'd better read the guide dedicated to importing jQuery.
Today, with the current state of the import management in browsers, I would generally recommend to be less ambitious and to simply import with a classical script element. But RequireJS is interesting and you might find it useful when your application grows.
Add this to your script:
document.write(unescape("%3Cscript src='/js/jquery-X.X.X.min.js' type='text/javascript'%3E%3C/script%3E"));
I have a project which consist of a lot of static HTML and js files. I need a build tool that can concatenate and minify them.
I saw this great screencast that explains how to do it with ant and YUI. The only thing I'm missing is after the minified version is created , how can i replace references to the JS/CSS files in the HTML, so it will reference the new minified version?
Is there a better/easier tool for this (not GPL/LGPL license)?
Grunt is pretty good, and supports most of those things. This plugin will re-write your CSS link tags, though normally (and for JS) you'd just write the link/script tags to point straight to the minified version anyway, and continually have it build your files.
You can try minify JS and CSS. Minify JS can make 1 JS file merging multiple JS file and same for CSS.