31

I have been building a single page app using requireJS and so far loving it. I have come to the point of developing other parts of the site outside of the main app and am not really sure how (or if) to use requireJS for this.

In my main app everything is triggered by this script tag:

<script data-main='/scripts/main' src='/scripts/libs/require.js'>

I am now developing the home page which has it's own front end scripts. Using the optimizer when it comes to getting the site live which will bundle all these scripts into one main.js package. I am struggling to understand where the rest of my site fits into this.

Say my app is dependent on jQuery and it gets bundled up in the optimized version of the app, what if I want to use jQuery on the homepage? I don't want to load in my app's main.js just to get access to my jQuery module. So yeah... a little confused!


I am imagining a site structure sort of like this:

/scripts
  - app-main.js //(includes all module dependencies after optimzation)
  - home-main.js //(includes all module dependencies after optimzation)

App:

<script data-main='/scripts/app-main' src='/scripts/libs/require.js'>

Homepage:

<script data-main='/scripts/home-main' src='/scripts/libs/require.js'>


Questions

  1. How can I use RequireJS to develop different parts of a site?
  2. Is it recommended to have multiple main.js files?
  3. How can my different main.js files share common modules such as jQuery post optimization?
Improve this question
2
  • 1
    I'd hold out for more answers on this. I have been messing around with "stacking" my require.js files by just having multiple calls to require(). It works fine, but I'm looking for thoughts on how to control the order without using modules/coffeescript... Commented Dec 28, 2011 at 22:43
  • I found this discussion useful for sharing configuration across multiple pages: github.com/jrburke/requirejs/issues/354 Commented Feb 18, 2013 at 6:25

2 Answers 2

Reset to default
38

The requirejs team has some samples for multipage applications on github. Have a look at: https://github.com/requirejs/example-multipage

Basically you are going to have the following structure:

  • page1.html: page 1 of the app.

  • page2.html: page 2 of the app.

  • js app: the directory to store app-specific modules.

  • lib: the directory to hold third party modules, like jQuery.

  • common.js: contains the requirejs config, and it will be the build target for the set of common modules.

  • page1.js: used for the data-main for page1.html. Loads the common module, then loads app/main1, the main module for page 1.

  • page2.js: used for the data-main for page2.html. Loads the common module, then loads app/main2, the main module for page 2.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I tried the sample page and I was able to get a working, optimized page. Try it.
The interesting piece to me here was the build.js could exclude a file that was just built and every module in that file would be excluded. github.com/requirejs/example-multipage/blob/master/tools/…
-1

So require.js should always be used on any page to allow for modularity and a clean namespace. I believe each 'app' needs it's own main.js script. When optimizing your site r.js allows for you to exclude modules from the compilation which you should do for jQuery always.

That way require.js will always load jquery.js on the fly and most of the time from the cache. Finding other modules that might be cached between your app and homepage will have to be done at your own discretion and depends on the flow of your users and other factors.

It sounds like you have two projects, an app and a marketing site. I believe those should be separated to quite an extend and should have their own respective 'js' folders containing their own main.js.

Improve this answer

2 Comments

This answer is essentially saying, "don't do what you're trying to do." Sometimes that is an ok answer, but in this case, I'd like to know if what he's doing is technically possible. Do we really know enough about the question to know whether his app is so big that it needs to be split up? If he's trying to build a single-page app, he might want multiple require files for different segments of his app...
I don't think this is philosophically or technically correct. There are plenty of cases where a single application could have multiple bulks of code that ought not be pushed down at once. The answer below from @PutzKipa is helpful.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.