babel-sublime VS webpack

18. Babel

@vitejs/plugin-react uses Babel for Fast Refresh

For new and incompatible syntax, the solution is transpiling—converting newer JS syntax to older syntax that can run on older engines. The most popular transpiler? Babel. This process ensures modern JS code can still reach a wide audience, even on legacy systems.

Website: babeljs.io

Fortunately we have tools like PostCSS and Babel, that let you target your specific Browser version, and they'll do their best to transpile and polyfill your code to work with that version. This alone will do a lot of the heavy lifting for you if you are working with a lot of code. However, if you are just writing out a few HTML, CSS, and JS files, then that would be overkill and you can just figure out what code to use by consulting CanIUse.com.

Cross-Browser Compatibility: Some features worked differently across browsers. I used Babel to transpile my JavaScript code, ensuring it worked consistently everywhere.

SuiteScript 2.1 introduces new language features, such as arrow functions and block-scoped variables, which support modern server-side code. However, developers must ensure browser compatibility. Not all browsers support these features natively. Transpilation, using tools like Babel, can convert modern JavaScript to a more compatible version. This ensures scripts run smoothly across different environments.

# React + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh # Fresh-Starts

Babel was one of the first to do this job, developed using JS, with a rich ecosystem and plugins, and has long been integrated into packaging tools such as webpack rollup.

@vitejs/plugin-react uses Babel for Fast Refresh

17. Webpack

The JS code gets transpiled by tools like Babel, then bundled (often by Webpack) into a single or few files (like bundle.js). This optimizes the website to load faster, as the browser can fetch everything from one file instead of multiple.

Remember that Webpack is highly configurable, and this article only scratches the surface of what's possible. Be sure to check the official Webpack documentation for more detailed information and advanced configurations.

Website: webpack.js.org

With Webpack 5, a new feature has helped microfrontends proliferate: Module Federation. Module Federation allows JavaScript code to be loaded — synchronously or asynchronously — at runtime.

Firefox: Extensions utilizing bundlers like webpack or Extension.js require zipped source code. Additionally, Firefox mandates submissions in Cross-Platform Install (XPI) format.

Webpack is one of the oldest and most widely used bundlers in web development, created by Tobias Koppers in 2012. It gained popularity after Browserify and RequireJS and has become the go-to choice for managing complex projects.

Micro-frontend has always aroused my curiosity: I wanted to understand how they work, how to build them, what their pros and cons are. In 2018, inspired by this topic, I tried to build something similar to single-spa in one of the pet projects. At that time, there was no Webpack Module Federation (WMF), and Webpack itself seemed inconvenient. The choice fell on ESBuild and importmap. Browser support for importmap at the time was mostly on paper or with special flags in browsers. For this reason, I used a polyfill. But, surprisingly, everything worked and even in several projects.

Packagers are the ones we most frequently come into contact with, such as Webpack Vite and Parcel. The latter may not be commonly used, but it is also a well-established tool.

npm packages dramatically sped up the productivity of developers by being able to leverage other developers' work. However, it had a major disadvantage: cjs was not compatible with web browsers. To solve this problem, the concept of bundlers was born. browserify was the first bundler which essentially worked by traversing an entry point and "bundling" all the require()-ed code into a single .js file compatible with web browsers. As time went on, other bundlers with additional features and differentiators were introduced. Most notably webpack, parcel, rollup, esbuild and vite (in chronological order).