Calling Files in Other Modules

Calling Files in Other Modules

Calling Files in Other Modules

If you created the files and folders described in Folder Structure, you can walk through this example to see how to call files in other modules.

Reset the manifest.json file so that all three applications use the same entry point as shown in the following code sample:

1"javascript": {
2    "entry_points": {
3        "shopping": "Modules/ModuleOne/JavaScript/ModuleOne.js",
4        "myaccount": "Modules/ModuleOne/JavaScript/ModuleOne.js",
5        "checkout": "Modules/ModuleOne/JavaScript/ModuleOne.js"
6    },

If you modify ModuleOne.js to add ModuleTwo as a dependency, you can then call it from within ModuleOne.js. For example, you can call ModuleTwo's mountToApp() method as shown in the following code sample:

1"text-purple-400">define('ModuleOne'
2, [
3    'ModuleTwo'
4  ]
5, "text-purple-400">function
6  (
7    ModuleTwo
8  )
9{
10  'use strict';
11 
12  "text-purple-400">return {
13    mountToApp: "text-purple-400">function ()
14    {
15      console.log('ModuleOne loaded!');
16      ModuleTwo.mountToApp();
17    }
18  }
19})

If you save these changes and then restart your local server to test these modifications, the following message displays in your browser's developer console:

ModuleOne loaded!
ModuleTwo loaded!

This output verifies that calling the file in the second module is working as expected.

Calling files in other modules is not limited to entry point files. This approach works for other types of files in your extension, too. You can reference any file, like views or models, if the file has been properly defined and made available to the application. So, instead of having an entry point file in your second module, you could have a view, model, or any other type of supported file instead. As shown in the preceding code sample, you can simply add it as a dependency and call one of its methods.