Menu
I'm very grateful for Addy Osmani and Thomas Davis for publishing their examples and boilerplates (http://backbonetutorials.com/organizing-backbone-using-modules, https://github.com/addyosmani/backbone-aura).
They were helping me a lot to get starting.
I'm currently developing a large web application. So I have a lot of components, for instance address management, date management, todos. Each component fills the whole space in my app (with the exception of the menu bar). Each selection of a new component in the menu requires a page transition.
In the beginning I took the file structure, boilerplate used by the tutorials above (giving all views to the 'views' directory). But as more components were added, putting alle views into one views directory became confusing for me. Even making subdirectories would be no solution, because in this file structure I lost the information which view is related to which model.
So I searched for another solution and found requirejs amd packages (http://requirejs.org/docs/api.html#packages). This helped me alot since all modules belonging to the same component (models, collections, views) came into one directory. Because postfixing every model with "Model" (and so on), things where clean enough for me.
Now to the question: I'm in the pre-production stage. I did not get into building and concatenation things together for production deployment. But now I want to try the requirejs optimizer. I have read the page "http://requirejs.org/docs/optimization.html" from James Burke. But not everything is clear to me.
Want I want is the following: I have these package directories. All the amd modules (views, models, collections) from one package directory shall be concatenated to one file, but their dependencies should not be included, as a lot of these outside package dependencies are loaded separately in the beginning.
Is there anybody with the same or similar requirements, who has already taken this step and can give some hints.
Thanks a lot
Wolfgang
339
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
The optimizer uses build profile to optimize all the css and js files. In the following example, the build.js file is created. The build.js file instructs RequireJS to copy all the app folders (appDir parameter) to the output folder built (dir parameter) and apply all the optimizations to the files located in the output folder.
The Optimizer in RequireJS has the following characteristics − Combines CSS files together. The optimizer is a component of the r.js adapter for Node and Nashorn. It is developed to be a part of a build process and not for the development process.
To optimize a single JS file, you need to create a JS file that contains the content of all its dependencies. Your file should look as given below − Now, you can create the main.js file which has all the dependencies for app.
You can take a look at these couple of boilerplates and see if they are helpful...
https://github.com/jcreamer898/RequireJS-Backbone-Starter
https://github.com/david0178418/BackboneJS-AMD-Boilerplate
https://github.com/swbiggart/node-express-requirejs-backbone
A few of those have build scripts in them to show you how that works.
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
