It will be helpful to have the source code available from previous recipes to bootstrap this recipe. Otherwise, you'll need to reference Exporting/importing multiple modules for external use for how to create the index.html file.

// falcon-heavy.js 
import { launchSequence } from './launch-sequence.js'; 
 
export const name = "Falcon Heavy"; 
export const COUNT_DOWN_DURATION = 5; 
 
export function launch () { 
  launchSequence(COUNT_DOWN_DURATION, name); 
} (COUNT_DOWN_DURATION); 
} 
 
// saturn-v.js 
import { launchSequence } from './launch-sequence.js'; 
 
export const name = "Saturn V"; 
export const COUNT_DOWN_DURATION = 10; 
 
export function launch () { 
  launchSequence(COUNT_DOWN_DURATION, name); 
} 
 
// launch-sequence.js 
export function launchSequence (countDownDuration, name) { 
  let currCount = countDownDuration; 
  console.log(`Launching in ${COUNT_DOWN_DURATION}`, name); 
 
  const countDownInterval = setInterval(function () { 
    currCount--; 
 
    if (0 < currCount) { 
      console.log(currCount); 
    } else { 
      console.log('%s LIFTOFF!!! 
', name); 
      clearInterval(countDownInterval); 
    } 
  }, 1000); 
} 

import * as falconHeavy from './falcon-heavy.js'; 
import * as saturnV from './saturn-v.js'; 
export { falconHeavy, saturnV }; 

import { falconHeavy, saturnV } from './rockets/index.js' 
 
export function main () { 
  saturnV.launch(); 
  falconHeavy.launch(); 
} 

The * syntax seen on the first two lines of index.js imports all the exported members under the same object. This means that the name, COUNT_DOWN_DURATION, and launch members of falcon-heavey.js are all attached to the falconHeavy variable. Likewise, for the saturn-v.js modules and the saturnV variable. So, when falconHeavy and saturnV are exported on line 4, those exported names now contain all the exported members of their respective modules.

This provides a single point where another module (main.js in this case) can import those members. The pattern has three advantages. It is simple; there is only one file to import members from, rather than many. It is consistent, because all packages can use an index module to expose members of multiple modules. It is more flexible; members of some modules can be used throughout a package and not be exported by the index module.

It is possible to export named items directly. Consider the following file, atlas.js:

import { launchSequence } from './launch-sequence.js'; 
 
const name = 'Atlas'; 
const COUNT_DOWN_DURATION = 20; 
 
export const atlas = { 
  name: name, 
  COUNT_DOWN_DURATION: COUNT_DOWN_DURATION, 
  launch: function () { 
    launchSequence(COUNT_DOWN_DURATION, name); 
  } 
}; 

The atlas member can be exported directly by index.js:

import * as falconHeavy from './falcon-heavy.js'; 
import * as saturnV from './saturn-v.js'; 
 
export { falconHeavy, saturnV }; 
export { atlas } from './atlas.js';

Then the main.js file can import the atlas member and launch it:

import { atlas, falconHeavy, saturnV } from './rockets/index.js' 
 
export function main () { 
  saturnV.launch(); 
  falconHeavy.launch(); 
  atlas.launch(); 
} 

This is one benefit of always using named exports; it's easier to collect and export specific members from packages with multiple modules.

Whether named or not, nesting is a great technique for grouping modules. It provides a mechanism for organizing code as the number of modules continues to grow.