|
| 1 | +# FAQ: RequireJS Optimization Tool |
| 2 | + |
| 3 | +* [How do I use the Optimization Tool?](#usage) |
| 4 | +* [What if I just have some JavaScript files to optimize, not a whole application directory?](#scriptsonly) |
| 5 | +* [Expanding on the previous question, what if I want optimize to just one JS request?](#onescript) |
| 6 | + |
| 7 | + |
| 8 | +### <a name="usage">How do I use the Optimization Tool?</a> |
| 9 | + |
| 10 | +See the [general optimization page](optimization.md) for basic set-up. Also see the [jQuery doc page](jquery.md) for a good way to set up your project, even if you are not using jQuery. |
| 11 | + |
| 12 | +### <a name="scriptsonly">What if I just have some JavaScript files to optimize, not a whole application directory?</a> |
| 13 | + |
| 14 | +In this case, you have just some .js files you want to optimize and do not want to copy a whole application directory. Here is how you might have your code set up: |
| 15 | + |
| 16 | +* appdirectory |
| 17 | + * app.html |
| 18 | + * scripts |
| 19 | + * require.js |
| 20 | + * app.js |
| 21 | + * one.js |
| 22 | + * two.js |
| 23 | + * three.js |
| 24 | +* requirejs (the unzipped optimization tool from the [download page](download.md)) |
| 25 | + |
| 26 | +app.html has script tags for require.js and loads app.js via a require call, like so: |
| 27 | + |
| 28 | + <!DOCTYPE html> |
| 29 | + <html> |
| 30 | + <head> |
| 31 | + <title>My App</title> |
| 32 | + <script src="scripts/require.js"></script> |
| 33 | + <script>require(["app"]);</script> |
| 34 | + </head> |
| 35 | + <body> |
| 36 | + <h1>My App</h1> |
| 37 | + </body> |
| 38 | + </html> |
| 39 | + |
| 40 | +app.js loads one.js, two.js and three.js via a require call: |
| 41 | + |
| 42 | + require(["one", "two", "three"], function (one, two, three) { |
| 43 | + }); |
| 44 | + |
| 45 | +You just want combine app.js, one.js, two.js and three.js into one script file, and you just want to process the .js files, you do not want the optimization tool to copy over your HTML and CSS, and therefore skip the CSS optimizations. |
| 46 | + |
| 47 | +In that case, create a build profile, call it app.build.js, and put it in the **scripts** directory. The app.build.js file can live anywhere, but just be sure to adjust the paths accordingly in the example below -- all paths will be relative to where the app.build.js is located. |
| 48 | + |
| 49 | + require({ |
| 50 | + baseUrl: "./" |
| 51 | + dir: "../scripts-build", |
| 52 | + requireUrl: "../../requirejs/require.js" |
| 53 | + }, |
| 54 | + "app"); |
| 55 | + |
| 56 | +This build profile tells RequireJS to treat the baseUrl to find scripts as the current directory (the **scripts** directory since this example assumes app.build.js is in the **scripts** directory), and to put the built output in the **scripts-build** directory, which will be a sibling to the **scripts** directory. It is strongly suggested you use a different output directory than the source directory -- otherwise bad things will likely happen as the optimization tool overwrites your source. |
| 57 | + |
| 58 | +The **requireUrl** tells the optimization tool where to find the require.js that accompanies the optimization tool. The tool uses require.js in the optimization process. |
| 59 | + |
| 60 | +The final argument to the require() call, **"app"**, tells the build system to use app.js as the basis for the build layer. The build system will then trace the dependencies for app.js and inject them into the **scripts-build/app.js** file. |
| 61 | + |
| 62 | +To run the build on Unix/Linux systems, run this command from inside the **scripts** directory: |
| 63 | + |
| 64 | + ../../requirejs/build/build.sh app.build.js |
| 65 | + |
| 66 | +For windows operating systems (a .bat file is in the works to make this easier): |
| 67 | + |
| 68 | + java -classpath ..\..\requirejs\build\lib\rhino\js.jar;..\..\requirejs\build\lib\closure\compiler.jar org.mozilla.javascript.tools.shell.Main ..\..\requirejs\build\build.js ..\..\requirejs\build\ app.build.js |
| 69 | + |
| 70 | +Once the build is done, you can use **scripts-build/app.js** in your deployed application. It will contain app.js, one.js, two.js and three.js. |
| 71 | + |
| 72 | +### Expanding on the previous question, what if I want optimize to just one JS request? |
| 73 | + |
| 74 | +In that case, assuming the same setup as above, add the **includeRequire: true** to the build profile: |
| 75 | + |
| 76 | + require({ |
| 77 | + baseUrl: "./" |
| 78 | + dir: "../scripts-build", |
| 79 | + requireUrl: "../../requirejs/require.js", |
| 80 | + includeRequire: true |
| 81 | + }, |
| 82 | + "app"); |
| 83 | + |
| 84 | +After the optimization tool runs, the **scripts-build/app.js** will include the contents of require.js, app.js, one.js, two.js and three.js. Copy **scripts-build/app.js** to your deployment area and rename it to **require.js** to load everything in one script call. |
| 85 | + |
0 commit comments