atkins/importmap

Easily import your JavaScript ES modules without the need of a bundler like Webpack within the TYPO3 CMS

0.1.0 2023-10-01 18:08 UTC

Requires

• typo3/cms-core: ^12.0

GPL-2.0-or-later

• Colin Atkins

• requirejs
• commonjs
• TYPO3 CMS
• webpack
• Importmap
• ES modules

README

Easily import your JavaScript ES modules without the need of a bundler like Webpack within the TYPO3 frontend.

Getting started

Install importmap with the following command through composer or install it from extension repository:

composer require atkins/importmap

Configure

Specify an importmap to the PAGE-object of your TypoScript e.g.

page = PAGE
page.importmap {
    application {
        path = EXT:your_extension/Resources/Public/JavaScript/application.js
    }
    moduleKey {
        path = EXT:your_extension/Resources/Public/JavaScript/modules/module-1.2.3.js
        preload = 1
    }
}

Always make sure to specify a path for the "application" module key as it is always used to bootstrap your JavaScript application. You should always use a path relative of the Public-folder from your provider extension. You can check out a working example at the EXT:pagedoctor_starter extension here.

Usage

Add an import statement to the top of your root application.js file to import the module:

import ModuleName from 'moduleKey'

// Use module here...
ModuleName.doSomething()