111 lines
3.8 KiB
HTML
111 lines
3.8 KiB
HTML
<div id="directory" class="section">
|
|
<h1>How to get started with RequireJS</h1>
|
|
|
|
<ul class="index mono">
|
|
<li class="hbox">
|
|
<a href="#get">Get RequireJS</a><span class="spacer boxFlex"></span><span class="sect">§ 1</span>
|
|
</li>
|
|
<li class="hbox">
|
|
<a href="#add">Add RequireJS</a><span class="spacer boxFlex"></span><span class="sect">§ 2</span>
|
|
</li>
|
|
<li class="hbox">
|
|
<a href="#optimize">Optimize</a><span class="spacer boxFlex"></span><span class="sect">§ 3</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<span class="note">Note: If you are using jQuery, there is a <a href="jquery.md">targeted jQuery tutorial</a></span>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>
|
|
<a name="get">Get RequireJS</a>
|
|
<span class="sectionMark">§ 1</span>
|
|
</h2>
|
|
|
|
<p>Go to the <a href="download.md">download</a> page and get the file.</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>
|
|
<a name="add">Add RequireJS</a>
|
|
<span class="sectionMark">§ 2</span>
|
|
</h2>
|
|
|
|
<span class="note">Note: For jQuery-specific advice, see the <a href="jquery.html">jQuery integration page</a></span>
|
|
|
|
<p>This setup assumes you keep all your JavaScript files in a "scripts" directory in your project. For example, if you have a project that has an project.html page, with some scripts, the directory layout might look like so:</p>
|
|
|
|
<ul>
|
|
<li>project-directory/
|
|
<ul>
|
|
<li>project.html</li>
|
|
<li>scripts/
|
|
<ul>
|
|
<li>main.js</li>
|
|
<li>helper/
|
|
<ul>
|
|
<li>util.js</li>
|
|
</ul></li>
|
|
</ul></li>
|
|
</ul></li>
|
|
</ul>
|
|
|
|
<p>Add require.js to the scripts directory, so it looks like so:</p>
|
|
|
|
<ul>
|
|
<li>project-directory/
|
|
<ul>
|
|
<li>project.html</li>
|
|
<li>scripts/
|
|
<ul>
|
|
<li>main.js</li>
|
|
<li>require.js</li>
|
|
<li>helper/
|
|
<ul>
|
|
<li>util.js</li>
|
|
</ul></li>
|
|
</ul></li>
|
|
</ul></li>
|
|
</ul>
|
|
|
|
<p>To take full advantage of the optimization tool, it is suggested that you keep all inline script out of the HTML, and only reference require.js with a require call like so to load your script:</p>
|
|
|
|
<pre><code><!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>My Sample Project</title>
|
|
<!-- data-main attribute tells require.js to load
|
|
scripts/main.js after require.js loads. -->
|
|
<script data-main="scripts/main" src="scripts/require.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1>My Sample Project</h1>
|
|
</body>
|
|
</html>
|
|
</code></pre>
|
|
|
|
<p>Inside of main.js, you can use require() to load any other scripts you need to run. This ensures a single entry point, since <a href="api.html#data-main">the data-main script you specify is loaded asynchronously</a>.</p>
|
|
|
|
<pre><code>require(["helper/util"], function(util) {
|
|
//This function is called when scripts/helper/util.js is loaded.
|
|
//If util.js calls define(), then this function is not fired until
|
|
//util's dependencies have loaded, and the util argument will hold
|
|
//the module value for "helper/util".
|
|
});
|
|
</code></pre>
|
|
|
|
<p>That will load the helper/util.js script. To get full advantage of RequireJS,
|
|
see the <a href="api.html">API docs</a> to learn more about defining and using
|
|
modules.</p>
|
|
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>
|
|
<a name="optimize">Optimize</a>
|
|
<span class="sectionMark">§ 3</span>
|
|
</h2>
|
|
|
|
<p>Once you are finished doing development and want to deploy your code for your end users, you can use the <a href="optimization.md">optimizer</a> to combine the JavaScript files together and minify it. In the example above, it can combine main.js and helper/util.js into one file and minify the result.</p>
|
|
</div>
|