New JavaScript build process (ES6 & AMD)

[maikschneider]

Hi @Jeggle-s, to release v12+ compatible versions, the backend JavaScript needs to be shipped as ES6 module.

In the 12.x-dev branch, I added a rollup.js configuration - similar to the linked example. However, there is the additional challenge of combining this with TypeScript processing. My first tests with the @rollup/plugin-typescript look very promising: The ES6 build is working in v12 - the AMD build becomes generated, but has slightly wrong imports.

I would like you to have a look into the build configuration and evaluate further steps.

• Is it possible / reasonable to combine both builds?
• Is rollup the way to go or should we consider esbuild / plain TypeScript?
• How can we make use of the TYPO3 sources (should we include them in the dev-branch)?

It would be nice to have a working example for our other TYPO3 extensions which should support multiple versions as well.

Thanks!

[Jeggle-s]

Hey @maikschneider.

• In my opinion it's completely reasonable to combine the builds into one build. It saves time and you don't have to rely on an older stack
• Rollup is the by far easiest and fastest to implement method of building the sources. It supports amd and es6 as targets and has plenty of plugins for transformations. It's also quite easy to extend rollup with own plugins as this is needed for the custom TYPO3 namespace transformation. EsBuild would be faster and is the rising star but currently does not support amd as target by default.
• Including the TYPO3 sources can be achieved by referencing them in your tsconfig.json. In the case of this extension I added the namespaces for TYPO3 Core and Backend. The TYPO3 Core team uses the same approach (https://github.com/TYPO3/typo3/blob/main/Build/tsconfig.json). You can see the changes I made here: https://github.com/maikschneider/bw_icons/commit/69dbc89c390dd4cb9a3f686ff6499e9328b2d53e

[maikschneider]

Version 3.0.0 adds support for v12, however drops support for v10 & v11. This way, there won't be need to combine amd and es6 builds. TypeScript and Rollup.js is still in use, but could be dropped in the future.