I want to dynamically create a main.js file which will contain the requirejs config.

[sohankd]

I have a json file where i list out all the modules that i want to use in my app and bundle them. So for that i haven't created a main.js file, but i want to create that file dynamically and want to add the paths, shims and other configs dynamically too. So how can i achieve that ? Or is there any way where i can extend the prebuilt config of main.js file and those extra modules
Here is my json file which conatins the module paths.

custom-package.json

`{
"name": "custom-package,

"modulePaths:{
"modules": "src/modules"
"vendor": "src/vendor"
}

"modules": [
"modules/Application"
"modules/Home"
"modules/AboutUs"
"vendor/Backbone"
"vendor/jquery"
]
}`

[ddziaduch]

You can generate that file on the fly using for e.g. NodeJS or PHP.

You can even create a static file which will just contains the shim and paths config. After loading it you can dynamically load modules which are required on current page

[sohankd]

You can generate that file on the fly using for e.g. NodeJS or PHP.

You can even create a static file which will just contains the shim and paths config. After loading it you can dynamically load modules which are required on current page

Thanks for the response @ddziaduch .
do you have any refernce doc for this ?
And one more question. whenever i assign moduleid to the define(), it stops loading other nested dependecies of that file. It just only loads the current file. Can you suggest me any way for this ?

[ddziaduch]

whenever i assign moduleid to the define(), it stops loading other nested dependecies of that file. It just only loads the current file. Can you suggest me any way for this ?

Sorry, I do not understand, can you please explain?

[sohankd]

define('Application', ['Home' ,'Details' ,'AboutUs'], function( home, details, aboutus){ start: function(){ //...body } }

As you can see, 'Application' is moduleId/module name of this file where 'Home', 'Details' and 'AboutUs' are the moduleid/module name of their respective files. So when i try to optimize this, requirejs optimizer should load all the dpendency of this 'Application' file i.e 'Home', 'Details' and 'AbotUs'. But it doesn't do that, means it completely stops optimizing other files and just optimize only this file with loading its dependecies.
Did you guess what is my issue ?

[ddziaduch]

@sohankd can you please show your file tree and your config file?

[sohankd]

[sohankd]

main config file.

[ddziaduch]

Ah that is the correct behaviour. When you assign the Modue ID it will not work because RequireJS doesn't know where the module is in placed in the file tree. So there are two options:

• Remove the module ID - easiest.
• Leave the module ID where it is now, but add it's ID into paths like you did with jQuery and others 🙂

[sohankd]

Thanks. Last question. Is there any way which can notify me that all the modules are loaded,so that i can call a module from those modules to start the application ?

[ddziaduch]

@sohankd just add modules as dependencies, so RequireJS will execute the callback after all modules load 🙂

[sohankd]

@ddziaduch thanks. I know this one. But what if i want to make the call in index.html file instead of a require call in mainConfig file. Will require('Application') be enough to start the application,declared in index.html file ?

`/* mainConfig.js */
require.config({ ...... });
require('Application')(); //i dont want to call like this.

/* Index.html */

<script>var app = require('Application');

app(); // i want to start from here.
</script>

[ddziaduch]

It won't work like that because require('Application') will only work if Application module is already defined - so it needs to required earlier. As RequireJS uses AMD - Asynchronous Module Definition - all modules are loaded asynchronously. That is why you need to wait for modules to be loaded. RequireJS gives you good abstraction for that by callbacks in require function.

[sohankd]

@ddziaduch Thanks for the help.

[sohankd]

@ddziaduch Hello. I tried how you suggested me, but that didn't work.I assigned moduleID to every module and also specified path for them in config file.But its still not loading the files mentioned in 'paths'. It only makes a require call to 'Application' which also fails.
Here is some screenshots of config file and the errors on optimisation process. Is there any work around for this ?

[ddziaduch]

What does this optimization process do?

[sohankd]

@ddziaduch It gethers all the files defined in 'path' property of config file and minify them to one file.

[ddziaduch]

@sohankd so it should work - your code looks valid 🙂

[sohankd]

@ddziaduch thanks. I solved it.

[ddziaduch]

@sohankd what was the issue?

[sohankd]

@ddziaduch one is baseUrl, and we have to set the mainConfigFile property to point to config.js file. thats it. Thanks for your help.