Remove babel from frontend-build (POC)

[bradenmacdonald]

This PR demonstrates two things:

1. Replace Babel with swc-loader
2. Move anything related to tests and linting to devDependencies so that when we just want to build and deploy an MFE, we don't need to bother installing those. This should greatly speed up the build/deploy process.

I tested this with the example app and the course authoring MFE and it seems to be working but obviously a lot more testing would be required before something like this could be merged. So for now it's just a proof of concept.

Findings:

Based on running the command npx howfat . --sort size-

Surprisingly, removing babel does not have a huge effect on the number of dependencies (about 300 less), and SWC is actually larger in terms of disk space (because it's a rust binary). Moving the horribly bloated jest and eslint to devDependencies has a much bigger impact.

Before:

@openedx/frontend-build@14.0.3 (2313 deps, 343.54mb, 71856 files, ©undefined)
├── typescript@4.9.5 (63.75mb, 108 files, ©Apache-2.0)
├─┬ babel-plugin-formatjs@10.5.16 (113 deps, 38.8mb, 3006 files, ©MIT)
├─┬ @svgr/webpack@8.1.0 (341 deps, 35.2mb, 7749 files, ©MIT)
├─┬ eslint-plugin-formatjs@4.13.3 (90 deps, 31.49mb, 2611 files, ©MIT)
├─┬ eslint-plugin-react@7.32.2 (538 deps, 29.68mb, 23824 files, ©MIT)
├─┬ @babel/preset-env@7.24.7 (252 deps, 23.91mb, 5739 files, ©MIT)
├─┬ jest@29.6.1 (344 deps, 23.09mb, 4676 files, ©MIT)
├─┬ eslint-plugin-jsx-a11y@6.7.1 (296 deps, 20.4mb, 12877 files, ©MIT)
├─┬ webpack@5.92.1 (88 deps, 18.5mb, 2737 files, ©MIT)
├─┬ eslint-plugin-import@2.27.5 (287 deps, 16.25mb, 12203 files, ©MIT)
├─┬ babel-jest@29.6.1 (162 deps, 16.05mb, 2694 files, ©MIT)
├─┬ jest-environment-jsdom@29.6.1 (120 deps, 14.26mb, 1944 files, ©MIT)
├─┬ webpack-dev-server@4.15.2 (232 deps, 13.5mb, 3444 files, ©MIT)
├─┬ @babel/core@7.24.7 (59 deps, 10.98mb, 1894 files, ©MIT)
├─┬ eslint@8.44.0 (108 deps, 10.26mb, 1368 files, ©MIT)
├─┬ cssnano@6.0.3 (70 deps, 10.25mb, 2593 files, ©MIT)
├── @formatjs/cli@6.2.12 (8.98mb, 4 files, ©MIT)
├─┬ react-dev-utils@12.0.1 (160 deps, 8.82mb, 2676 files, ©MIT)
├─┬ @typescript-eslint/eslint-plugin@5.62.0 (54 deps, 7.89mb, 2783 files, ©MIT)
... more

After removing babel:

@openedx/frontend-build@14.0.4 (2038 deps, 385.88mb, 64975 files, ©undefined)
├── typescript@4.9.5 (63.75mb, 108 files, ©Apache-2.0)
├─┬ @swc/core@1.6.3 (3 deps, 36.07mb, 27 files, ©Apache-2.0)
├─┬ eslint-plugin-formatjs@4.13.3 (85 deps, 30.17mb, 2297 files, ©MIT)
├─┬ eslint-plugin-react@7.32.2 (538 deps, 29.68mb, 23824 files, ©MIT)
├── @formatjs/swc-plugin-experimental@0.4.0 (27.84mb, 5 files, ©MIT)
├─┬ jest@29.6.1 (345 deps, 25.95mb, 4875 files, ©MIT)
├─┬ eslint-plugin-jsx-a11y@6.7.1 (296 deps, 20.4mb, 12877 files, ©MIT)
├─┬ webpack@5.92.1 (88 deps, 18.5mb, 2737 files, ©MIT)
├─┬ @svgr/plugin-jsx@8.1.0 (87 deps, 17.08mb, 2403 files, ©MIT)
├─┬ eslint-plugin-import@2.27.5 (287 deps, 16.25mb, 12203 files, ©MIT)
├─┬ @svgr/core@8.1.0 (91 deps, 14.26mb, 2340 files, ©MIT)
├─┬ webpack-dev-server@4.15.2 (230 deps, 13.5mb, 3435 files, ©MIT)
├─┬ jest-environment-jsdom@29.6.1 (111 deps, 13.32mb, 1789 files, ©MIT)
├─┬ cssnano@6.0.3 (71 deps, 10.27mb, 2603 files, ©MIT)
├─┬ eslint@8.44.0 (105 deps, 10.21mb, 1353 files, ©MIT)
├── @formatjs/cli@6.2.12 (8.98mb, 4 files, ©MIT)
├─┬ react-dev-utils@12.0.1 (149 deps, 8.68mb, 2619 files, ©MIT)
├─┬ @typescript-eslint/eslint-plugin@5.62.0 (54 deps, 7.89mb, 2783 files, ©MIT)
├─┬ @svgr/plugin-svgo@8.1.0 (45 deps, 7.59mb, 1298 files, ©MIT)
├─┬ html-webpack-plugin@5.6.0 (47 deps, 7.44mb, 1886 files, ©MIT)
├─┬ sass@1.69.7 (17 deps, 6.22mb, 143 files, ©MIT)
├─┬ @types/jest@29.5.12 (53 deps, 4.17mb, 524 files, ©MIT)
├─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.15 (20 deps, 3.87mb, 4392 files, ©MIT)
├─┬ ts-jest@29.1.4 (27 deps, 3.7mb, 498 files, ©MIT)
├─┬ css-loader@5.2.7 (31 deps, 3.02mb, 597 files, ©MIT)
├─┬ sharp@0.32.6 (59 deps, 3.01mb, 576 files, NATIVE, ©Apache-2.0)
├─┬ image-minimizer-webpack-plugin@3.8.3 (16 deps, 2.98mb, 1255 files, ©MIT)
├─┬ mini-css-extract-plugin@1.6.2 (16 deps, 2.88mb, 344 files, ©MIT)
├─┬ postcss-loader@7.3.4 (27 deps, 2.87mb, 264 files, ©MIT)
├─┬ autoprefixer@10.4.19 (10 deps, 2.69mb, 994 files, ©MIT)
├─┬ @typescript-eslint/parser@5.62.0 (38 deps, 2.55mb, 1246 files, ©BSD-2-Clause)
├─┬ @edx/new-relic-source-map-webpack-plugin@2.1.0 (59 deps, 2.34mb, 636 files, ©AGPL-3.0)
├─┬ url-loader@4.1.1 (15 deps, 2.21mb, 305 files, ©MIT)
├─┬ webpack-bundle-analyzer@4.10.2 (16 deps, 2.18mb, 156 files, ©MIT)
├─┬ express@4.19.2 (69 deps, 2.13mb, 568 files, ©MIT)
├─┬ file-loader@6.2.0 (13 deps, 2mb, 294 files, ©MIT)
├─┬ resolve-url-loader@5.0.0 (15 deps, 1.8mb, 261 files, ©MIT)
├─┬ webpack-cli@5.1.4 (40 deps, 1.05mb, 394 files, ©MIT)
... many smaller deps under 1mb

After removing babel and moving test+lint requirements to devDependencies:

@openedx/frontend-build@14.0.4 (937 deps, 232.61mb, 21660 files, ©undefined)
├─┬ @swc/core@1.6.3 (3 deps, 36.07mb, 27 files, ©Apache-2.0)
├── @formatjs/swc-plugin-experimental@0.4.0 (27.84mb, 5 files, ©MIT)
├─┬ webpack-dev-server@4.15.2 (245 deps, 22.41mb, 3898 files, ©MIT)
├─┬ webpack@5.92.1 (92 deps, 19.87mb, 2902 files, ©MIT)
├─┬ @svgr/core@8.1.0 (106 deps, 17.52mb, 2536 files, ©MIT)
├─┬ @svgr/plugin-jsx@8.1.0 (75 deps, 13.92mb, 2224 files, ©MIT)
├─┬ cssnano@6.0.3 (73 deps, 10.3mb, 2611 files, ©MIT)
├── @formatjs/cli@6.2.12 (8.98mb, 4 files, ©MIT)
├─┬ react-dev-utils@12.0.1 (153 deps, 8.89mb, 2636 files, ©MIT)
├─┬ @svgr/plugin-svgo@8.1.0 (45 deps, 7.59mb, 1298 files, ©MIT)
├─┬ html-webpack-plugin@5.6.0 (47 deps, 7.45mb, 1886 files, ©MIT)
├─┬ sass@1.69.7 (18 deps, 6.31mb, 153 files, ©MIT)
├─┬ @pmmmwh/react-refresh-webpack-plugin@0.5.15 (20 deps, 3.87mb, 4392 files, ©MIT)
├─┬ image-minimizer-webpack-plugin@3.8.3 (18 deps, 3.46mb, 1306 files, ©MIT)
├─┬ css-loader@5.2.7 (31 deps, 3.02mb, 597 files, ©MIT)
├─┬ sharp@0.32.6 (58 deps, 2.96mb, 552 files, NATIVE, ©Apache-2.0)
├─┬ mini-css-extract-plugin@1.6.2 (16 deps, 2.88mb, 344 files, ©MIT)
├─┬ postcss-loader@7.3.4 (27 deps, 2.87mb, 264 files, ©MIT)
├─┬ autoprefixer@10.4.19 (10 deps, 2.69mb, 994 files, ©MIT)
├─┬ @edx/new-relic-source-map-webpack-plugin@2.1.0 (56 deps, 2.27mb, 601 files, ©AGPL-3.0)
├─┬ url-loader@4.1.1 (15 deps, 2.21mb, 305 files, ©MIT)
├─┬ webpack-bundle-analyzer@4.10.2 (16 deps, 2.18mb, 156 files, ©MIT)
├─┬ express@4.19.2 (66 deps, 2.06mb, 533 files, ©MIT)
├─┬ resolve-url-loader@5.0.0 (16 deps, 2.03mb, 281 files, ©MIT)
├─┬ file-loader@6.2.0 (13 deps, 2mb, 294 files, ©MIT)
├─┬ webpack-cli@5.1.4 (40 deps, 1.05mb, 394 files, ©MIT)
... a few other dependencies under 1mb in size

[openedx-webhooks]

Thanks for the pull request, @bradenmacdonald! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[davidjoy]

This will break all libraries using babel-preserve-modules for their builds, which I believe is all of them. I don't think we can just unilaterally delete Babel without some preparation.

[bradenmacdonald]

@davidjoy Well, first of all, this PR demonstrates that removing babel doesn't provide a very substantial improvement on its own, so even though I personally prefer to get rid of babel, I'm not even necessarily pushing for that after trying it out here. Part of this PR is just to gain information.

But secondly, I'm not sure what you mean. I checked frontend-lib-content-components and paragon, two libraries I had open at the time, and neither reference babel-preserve-modules. I checked frontend-build and it's referenced in babel.config.js, but that's irrelevant because nothing would be reading that file anyways.

[davidjoy]

"All of them" is apparently an exaggeration, but here's an example: https://github.com/openedx/frontend-component-header/blob/master/babel.config.js

Paragon goes its own way, and I recall content components not following the established pattern when it was made. 😅

[bradenmacdonald]

@davidjoy Right, but again, if we're not using babel, nothing is going to even try to read that babel.config.js file, so it doesn't matter if it references a config preset that has been deleted? Or am I missing something?

[openedx-webhooks]

@bradenmacdonald Even though your pull request wasn’t merged, please take a moment to answer a two question survey so we can improve your experience in the future.