ES6 : optimizing the Command pattern

I'm building a kind of in-browser CLI for doing tests on a Game Engine.

The app looks like a console, with an input test and a submit button below a results sequence container DIV.

Behind the scene, there is an Invoker and numerous Commands objects :

// imports
import Invoker from '../cli/Invoker.js'

import Command1 from '../commands/Command1.js'
import Command2 from '../commands/Command2.js'
// ...
import Command20 from '../commands/Command20.js'

// instanciatiing
const invoker = new Invoker(context)

const commands = [
  new Command1(),
  new Command2(),
  // ...
  new Command20(),
]

// attach in invoker
commands.forEach(command => invoker.install(command))

the usage is pretty simple :

// later...
invoker.run('command20', { ...withArgs })

QUESTION 1/2:

Since this creates a bunch of imports, and initialization code, which could over time pollute the namespace of the client app code. How to fix it ? Builder pattern ? Facade ? Flyweight ? or something other ?

QUESTION 2/2

Rendering results : couldn't figure exactly where to put the code which take the effects of running a command, render (either with Mustache or JSX) and append it to the resulting DIV. Some comments ?

Help is welcome. Regards.