Attention

TYPO3 v8 has reached its end-of-life March 31st, 2020 and is not maintained by the community anymore. Looking for a stable version? Use the version switch on the top left.

There is no further ELTS support. It is recommended that you upgrade your project and use a supported version of TYPO3.

Use RequireJS in your own extension

To be able to use RequireJS at all, some prerequisites must be fulfilled:

  • Your extension must have a Resources/Public/JavaScript directory. That directory is used for autoloading the modules stored in your extension.

  • Think about what's the purpose of the module. You can only write one module per file (anything else is bad practice anyway)

  • Each module has a namespace and a module name. The namespace is TYPO3/CMS/<EXTKEY>, <EXTKEY> is your extension key in UpperCamelCase, e.g. foo_bar = FooBar

  • The namespace maps automatic to your Resources/Public/JavaScript directory

  • The filename is the modulename + .js

  • complete example: TYPO3/CMS/FooBar/MyMagicModule is resided in EXT:foo_bar/Resources/Public/JavaScript/MyMagicModule.js

Every AMD is wrapped in the same construct:

define([], function() {
   // your module logic here
});

This is the "container" of the module. It holds the module logic and takes care of dependencies.

Core-wise, TYPO3 itself defines in its own modules an object holding the module logic, namely parameters and methods. The object has the same name as the module, in our case "MyMagicModule":

define([], function() {
   var MyMagicModule = {
      foo: 'bar'
   };

   MyMagicModule.init = function() {
     // do init stuff
   };

   // To let the module be a dependency of another module, we return our object
   return MyMagicModule;
});