typescripttypo3typo3-extensions

TYPO3 Extension Development - Where should JavaScript modules be placed in the optimal case?


I have stored a JavaScript file in a TYPO3 extension (under Resources/Public/Css/JavaScript/Backend/Iconpack.js), which is used as a JavaScript module in the backend.

However, when developing the extension, I packed the file full of console.log() to allow debugging, and also to better document certain things.

Of course I want that in the final extension as well as when downloading via composer, only a minimized version of this JavaScript is loaded, but not the original source file.

On the other hand, of course, I want the original source file to be stored somewhere in the git repository, so that you can actually continue working on it.

In the frontend, I would normally just store Iconpack.js, for example, in the same folder, create a minimized version from it, i.e. Iconpack.min.js, and use this minimized file.

But unfortunately that doesn't work in this case, because the file path for JavaScript modules is also the namespace.


What would be the best way to solve this?

To summarize:

I was able to find out that I can at least prevent a certain file from being loaded via composer with .gitattributes.

Unfortunately, that doesn't solve the question of where I should best place it so that other developers have it easier and it's clear that it's the source file.

Currently I only have the minimized version stored in git for this reason, but that makes little sense for an open source repository: https://github.com/quellenform/t3x-iconpack/tree/main/Resources/Public/JavaScript/Backend

Ideas?


Solution

  • The correct procedure for a modern TYPO3 installation (v11+) should be as follows:

    JavaScript files should always be written in TypeScript and stored in the "Build" directory.

    In addition, the TypeScript compiler should receive instructions from there via the file tsconfig.json into which format the TypeScript should be compiled (in the case of a JavaScript module for TYPO3 v12, this is "ES2020") and where the finished JavaScript should be stored. The output path in such a case is the public directory of the extensions, for example "Resources/Public/JavaScript/".

    Hint: The tsconfig.json file in the TYPO3 source code is also helpful.

    In this way, not only can the source code of a JavaScript file be separated from the public directory, but the source code itself can also be built up clearly and reliably with TypeScript and adapted for future TYPO3 versions.

    Furthermore, other tasks can also be integrated in this way (depending on the IDE), in which the JavaScript is minimised directly after compilation, for example.