Menu
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
main.js files share common modules such as jQuery post optimization?
372
So, RequireJS doesn't support it. From your use case it seems that you don't need synchronous RequireJS, you need to return result asynchronously. AMD pattern allows to define dependencies and load them asynchronously, but module's factory function must return result synchronously.
RequireJS is a JavaScript file and module loader. It improves perceived page load times because it allows JavaScript to load in the background. In particular, it enables asynchronous JavaScript loading.
RequireJS is a JavaScript library and file loader which manages the dependencies between JavaScript files and in modular programming. It also helps to improve the speed and quality of the code.
The define() function can be used to load the modules (module can be an object, function, class or a code which is executed after loading a module). You can load different versions of the same module in the same page.
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.
92
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
