Permalink
Browse files

Update docs to use better priority instructions, update project to us…

…e r.js, require.js update to lastest master.
  • Loading branch information...
1 parent 3dfe2bc commit 1886efef867b9fa2980917a0ef2c54ab828cbd6b @jrburke jrburke committed May 14, 2011
Showing with 7,912 additions and 208 deletions.
  1. +57 −96 README.md
  2. +2 −26 dist.sh
  3. +7,710 −0 jquery-require-sample/r.js
  4. +71 −43 jquery-require-sample/webapp/scripts/require-jquery.js
  5. +1 −0 parts/README.md
  6. +71 −43 parts/require.js
View
@@ -20,71 +20,64 @@ First, an explanation on what to change in the sample project:
### app.html
-Change the script tag to load just **require.js** ([download it](http://requirejs.org/docs/download.html#requirejs) from the RequireJS site) instead of require-jquery.js.
-
-### main.js
-
-Change main.js to use the [priority configuration option](http://requirejs.org/docs/api.html#config). This tells RequireJS to download jQuery before tracing any other script dependencies:
-
- //Configure RequireJS
- require({
- //Load jQuery before any other scripts, since jQuery plugins normally
- //assume jQuery is already loaded in the page.
- priority: ['jquery']
- });
-
- //Load scripts.
- require(['jquery', 'jquery.alpha', 'jquery.beta'], function($) {
- //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
- $(function() {
- $('body').alpha().beta();
- });
- });
-
+* Change the script tag to load just **require.js** ([download it](http://requirejs.org/docs/download.html#requirejs) from the RequireJS site) instead of require-jquery.js
+* Remove the data-main attribute
+* Load the main.js file with a require() call in the HTML file.
+* Specify a [priority configuration option](http://requirejs.org/docs/api.html#config). This tells RequireJS to download jQuery before tracing any other script dependencies:
+
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <title>jQuery+RequireJS Sample Page</title>
+ <script src="scripts/require.js"></script>
+ <script>
+ require({
+ baseUrl: 'scripts',
+ priority: ['jquery']
+ }, ['main']);
+ </script>
+ </head>
+ <body>
+ <h1>jQuery+RequireJS Sample Page</h1>
+ <p>Look at source or inspect the DOM to see how it works.</p>
+ </body>
+ </html>
+
+The above example assumes that you downloaded jQuery and placed it in the project
+as **webapp/scripts/jquery.js**. If you wanted to load jQuery from a CDN, like Google's you
+could do this:
+
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <title>jQuery+RequireJS Sample Page</title>
+ <script src="scripts/require.js"></script>
+ <script>
+ require({
+ baseUrl: 'scripts',
+ paths: {
+ jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min'
+ },
+ priority: ['jquery']
+ }, ['main']);
+ </script>
+ </head>
+ <body>
+ <h1>jQuery+RequireJS Sample Page</h1>
+ <p>Look at source or inspect the DOM to see how it works.</p>
+ </body>
+ </html>
+
+However, you will want to download a local copy of jQuery and place it in the
+project at **webapp/scripts/jquery.js** so it can be used with the optimizer.
### Optimization Considerations
-Since jQuery plugins do not explicitly specify jQuery as a script dependency via the RequireJS define() call, and they expect jQuery to already be in the page, there can be a problem when you try to use the RequireJS optimizer with the setup above.
-
-If you exclude jQuery from the optimized main.js file, then the plugins will be included in main.js, but they will try to use jQuery before the priority configuration has had a chance to load jQuery.
-
-There are two options to fix this:
-
-#### 1) Include jQuery in the optimized file.
-
-* Download the version of jQuery you are using, and put it in the **webapp/scripts** directory, and call it **jquery.js**. Then change the app.build.js file to the following:
-
- ({
- appDir: "../",
- baseUrl: "scripts",
- dir: "../../webapp-build",
- //Comment out the optimize line if you want
- //the code minified by UglifyJS
- optimize: "none",
-
- modules: [
- {
- name: "main"
- }
- ]
- })
-
-#### 2) wrap the jQuery plugins in a define call.
-
-Instead of including jQuery in the optimized main.js, you can modify the contents of each file that implicitly depends on jQuery with the following (assuming it does not already have a define() call in the file):
-
- define(['jquery'], function (jQuery) {
- //Some plugins use jQuery, some may just use $,
- //so create an alias for $ just in case. You can
- //leave this out if the plugin clearly uses "jQuery"
- //instead of "$".
- var $ = jQuery;
-
- //The rest of the file contents go here.
+With jQuery loaded externally, before main.js is loaded, jQuery now needs to be
+excluded from the built file the optimizer generates.
- });
-
-For the optimizer: create an empty file called **blank.js** and put it in the webapp/scripts directory. Then change app.build.js to the following:
+Make sure you have a jquery.js in the **webapp/scripts** directory. Then change
+the app.build.js file to the following:
({
appDir: "../",
@@ -94,44 +87,12 @@ For the optimizer: create an empty file called **blank.js** and put it in the we
//the code minified by UglifyJS
optimize: "none",
- paths: {
- "jquery": "blank"
- },
-
modules: [
{
- //If you have multiple pages in your app, you may
- //want jQuery cached separately from the optimized
- //main module. In that case, uncomment the exclude
- //directive below.
- exclude: ["jquery"],
- name: "main"
+ name: "main",
+ exclude: ["jquery"]
}
]
})
-By wrapping each of the jQuery plugins that implicitly rely on jQuery in a define() call, you can be sure they will not execute until jQuery is loaded via the priority configuration.
-
-**NOTE**: If a plugin tries to define a global variable (does not attach the functionality to jQuery.fn), wrapping the code in a define() call may cause errors if the plugin expects you to call one of the global variables it creates.
-
-You can work around this problem by declaring the variable outside the define call. So, for example, if the plugin looks like this when it is wrapped:
-
- define(['jquery'], function (jQuery) {
- var $ = jQuery;
-
- //The plugin wanted to make globalFoo a global,
- //but this will not work with the define wrapping:
- var globalFoo = "something";
- ...
- });
-
-Put the var declaration outside the define function and remove the "var" from the internal assignment:
-
- var globalFoo;
- define(['jquery'], function (jQuery) {
- var $ = jQuery;
-
- //Just assign now, remove the declaration.
- globalFoo = "something";
- ...
- });
+This will bundle all the scripts into the built main.js file, except for jQuery.
View
@@ -1,43 +1,19 @@
#!/bin/sh
-# Assumes RequireJS is in a sibling directory to this repo. Change this
-# if it is in another directory.
-REQUIREJS=../requirejs
-
DISTDIR=dist/jquery-require-sample
# This script preps the jquery-require-sample for distribution.
# Make the dist directory
rm -rf dist
mkdir dist
-mkdir dist/jquery-require-sample
# Copy the sample files.
-cp -r jquery-require-sample/webapp $DISTDIR/webapp
-
-# Copy over the build system for requirejs and basic require files, used by the build.
-mkdir $DISTDIR/requirejs
-mkdir $DISTDIR/requirejs/adapt
-mkdir $DISTDIR/requirejs/build
-cp -r $REQUIREJS/bin $DISTDIR/requirejs/bin
-cp -r $REQUIREJS/build/jslib $DISTDIR/requirejs/build/jslib
-cp -r $REQUIREJS/build/lib $DISTDIR/requirejs/build/lib
-cp $REQUIREJS/build/example.build.js $DISTDIR/requirejs/build/example.build.js
-cp $REQUIREJS/build/build.bat $DISTDIR/requirejs/build/build.bat
-cp $REQUIREJS/build/build.js $DISTDIR/requirejs/build/build.js
-cp $REQUIREJS/build/build.sh $DISTDIR/requirejs/build/build.sh
-cp $REQUIREJS/build/buildj.bat $DISTDIR/requirejs/build/buildj.bat
-cp $REQUIREJS/build/buildj.sh $DISTDIR/requirejs/build/buildj.sh
-cp $REQUIREJS/adapt/node.js $DISTDIR/requirejs/adapt/node.js
-cp $REQUIREJS/adapt/rhino.js $DISTDIR/requirejs/adapt/rhino.js
-
-cp $REQUIREJS/require.js $DISTDIR/requirejs
-cp $REQUIREJS/LICENSE $DISTDIR/requirejs/LICENSE
+cp -r jquery-require-sample $DISTDIR
# Start the build.
cd $DISTDIR/webapp/scripts
-../../requirejs/build/build.sh app.build.js
+node ../../r.js -o app.build.js
cd ../../..
# Mac weirdness
Oops, something went wrong. Retry.

0 comments on commit 1886efe

Please sign in to comment.