aaronj1335/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Given a project with the files below and a directory structure as follows:
$ tree --charset ascii
.
|-- index.html
|-- js
|   |-- components
|   |   `-- vendor
|   |       |-- jquery-1.7.2.js
|   |       |-- jquery.js
|   |       `-- test.js
|   |-- order.js
|   `-- require.js
`-- nested
    `-- path
        `-- index.html -> ../../index.html

5 directories, 7 files

Note that the file names are below, but the directory structure is not preserved
since github gist's don't allow subduers.  The directory is served statically
(using something like python -m SimpleHTTPServer), with the require.js config
set with baseUrl: '/js' and the following URLs are visited:
http://127.0.0.1:8000/
http://127.0.0.1:8000/nested/path/

Here the page load works, but there are two gotchas:

  
## index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>RequireJS relative path</title>
</head>
<body>

  <script src="/js/require.js"></script>
  <script>
    require.config({baseUrl: '/js'});
  </script>
  <script>
    require(['components/vendor/test'], function() { });
  </script>
</body>
</html>

<!-- same as nested/path/index.html -->

## jquery.js
define([
    'order!./jquery-1.7.2'
], function() {
    return window.jQuery;
});

## test.js
// note the 'define' call instead of 'require'
define([
    './jquery'
], function($) {
    if (! $) {
        throw Error('jQuery is not defined');
    }
});

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>RequireJS relative path</title>
	</head>
	<body>

	<script src="/js/require.js"></script>
	<script>
	require.config({baseUrl: '/js'});
	</script>
	<script>
	require(['components/vendor/test'], function() { });
	</script>
	</body>
	</html>

	<!-- same as nested/path/index.html -->
	define([
	'order!./jquery-1.7.2'
	], function() {
	return window.jQuery;
	});
	// note the 'define' call instead of 'require'
	define([
	'./jquery'
	], function($) {
	if (! $) {
	throw Error('jQuery is not defined');
	}
	});