start.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">&sect; 1</span>
        </li>
        <li class="hbox">
            <a href="#add">Add RequireJS</a><span class="spacer boxFlex"></span><span class="sect">&sect; 2</span>
        </li>
        <li class="hbox">
            <a href="#optimize">Optimize</a><span class="spacer boxFlex"></span><span class="sect">&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">&sect; 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">&sect; 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>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;My Sample Project&lt;/title&gt;
        &lt;!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. --&gt;
        &lt;script data-main="scripts/main" src="scripts/require.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;My Sample Project&lt;/h1&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<span class="note">The path rules used for data-main changed in RequireJS 0.23. Before that version, data-main="main" for the above example.</span>

<p>Inside of main.js, you can use require() to load any other scripts you need to run:</p>

<pre><code>require(["helper/util"], function() {
    //This function is called when scripts/helper/util.js is loaded.
});
</code></pre>

<p>That is it! Check out the <a href="api.html">API docs</a> to learn more about require().</p>
</div>

<div class="section">
<h2>
    <a name="optimize">Optimize</a>
    <span class="sectionMark">&sect; 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>