Usage

Once you defined your importmap you are able to import your modules within the application module or any other loaded module file within your importmap context.

How to import modules in JavaScript?

The import statement has to be added to the top of your application file specified at importmap.application.path:

import { Application } from 'stimulus'
import Alpine from 'alpinejs'
import HeaderController from 'controllers/header_controller'

The corresponding TypoScript configuration would look like this:

page.importmap {
    application {
        path = EXT:your_extension/Resources/Public/JavaScript/application.js
    }
    stimulus {
        path = EXT:your_extension/Resources/Public/JavaScript/modules/stimulus.js
        preload = 1
    }
    alpinejs {
        path = EXT:your_extension/Resources/Public/JavaScript/modules/alpinejs.js
        preload = 1
    }
    controllers/header_controller {
        path = EXT:your_extension/Resources/Public/JavaScript/controllers/header_controller.js
        preload = 1
    }
}