Permalink
Browse files

Initial commit, moving the resources out of the requirejs project.

  • Loading branch information...
jrburke committed Mar 19, 2011
0 parents commit 001bcbddd7c23c3be46cdc45a6b234fdbd5ce3af
@@ -0,0 +1,3 @@
+dist
+.DS_Store
+
113 README.md
@@ -0,0 +1,113 @@
+# RequireJS + jQuery
+
+This project shows how jQuery can be used with RequireJS. It includes a sample project that you can use as a template to get started.
+
+See the [Use with jQuery](http://requirejs.org/docs/jquery.html) page on the RequireJS site for more background on the sample project.
+
+The sample project uses a require-jquery.js file which is a combination of three files:
+
+* RequireJS, version 0.24.0
+* jQuery, version 1.5.1
+* [post.js](tree/master/parts/post.js), which just registers jQuery as a module.
+
+This project will be kept relatively up to date with the latest jQuery and RequireJS files as they are released.
+
+## Alternate Integration
+
+If you do not want to bundle RequireJS with jQuery, you can load jQuery separately, not as part of the same file as RequireJS, but it has some implications when using the RequireJS optimizer. See **Optimization Considerations** below. 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();
+ });
+ });
+
+
+### 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.
+
+ });
+
+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:
+
+ ({
+ appDir: "../",
+ baseUrl: "scripts",
+ dir: "../../webapp-build",
+ //Comment out the optimize line if you want
+ //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"
+ }
+ ]
+ })
+
+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**: some jQuery plugin files may try to declare global variables. Most well-written plugins try to avoid creating global variables, but if the plugin does do try, wrapping the code in a define() call may cause errors if the plugin expects you to call one of the global variables it creates.
47 dist.sh
@@ -0,0 +1,47 @@
+#!/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
+
+# Start the build.
+cd $DISTDIR/webapp/scripts
+../../requirejs/build/build.sh app.build.js
+cd ../../..
+
+# Mac weirdness
+find . -name .DS_Store -exec rm {} \;
+
+# Package it.
+zip -r jquery-require-sample.zip jquery-require-sample/*
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>jQuery+RequireJS Sample Page</title>
+ <!-- This is a special version of jQuery with RequireJS built-in -->
+ <script data-main="scripts/main" src="scripts/require-jquery.js"></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>
@@ -0,0 +1,27 @@
+({
+ appDir: "../",
+ baseUrl: "scripts/",
+ dir: "../../webapp-build",
+ //Comment out the optimize line if you want
+ //the code minified by UglifyJS
+ optimize: "none",
+
+ paths: {
+ "jquery": "require-jquery"
+ },
+
+ modules: [
+ //Optimize the require-jquery.js file by applying any minification
+ //that is desired via the optimize: setting above.
+ {
+ name: "require-jquery"
+ },
+
+ //Optimize the application files. Exclude jQuery since it is
+ //included already in require-jquery.js
+ {
+ name: "main",
+ exclude: ["jquery"]
+ }
+ ]
+})
Oops, something went wrong.

0 comments on commit 001bcbd

Please sign in to comment.