0 Comments // Reading Time: 5 min.
Terminology: Transpiler vs Compiler
While the term compiler is quite widespread, the term transpiler is probably less familiar: a transpiler translates the programme code of a higher programming language into another higher programming language. The code of a higher programming language is far more abstract than the machine language. For example, TypeScript code is translated into JavaScript code.
It is different with a compiler, here the program code of a higher abstraction level is translated into machine code. For example, when a program code of the higher programming language C is translated into machine code with a compiler.
So in this article, ES6 syntax with new features such as classes, const and let variables, destructuring etc. is translated into browser-compatible JavaScript. Therefore, according to the above definition, we speak of transpiling.
Babel history
In 2005 – after a 5-year break – the new JavaScript version was released. And since then, development has not taken a break. Since at that time the browser landscape was still largely characterized by old browsers that did not support the new versions, acceptance of these features was slow. Internet Explorer versions < 8.0 are particularly worth mentioning here.
This changed with the appearance of Babel. For the first time, this made it quite easy to write modern JavaScript without losing the support of older browsers. From its release in 2014 into 2019, download numbers rose to around 16 million downloads per week, making Babel the top dog as a transpiler for ES2015+ and the later ES6+ all the way to support for JSX for React.
New Kids on the Block
While Babel itself was still written in JavaScript, new libraries have emerged in recent years that pursue the same goals but rely on compiled and modern languages. One is esbuild, which was written in Go, and the other is SWC, which is written in Rust. The performance gain of these tools is so huge that they play in a league of their own. For example, esbuild advertises build times on its website of 0.33 seconds versus 30+ seconds with comparable tools. And SWC compares itself on the benchmark page in most cases only with esbuild.
esbuild & SWC in a nutshell
SWC is developed by kdy1dev, who, according to his own Twitter account, works on Next.js at Vercel. The SWC website states that the transpiler is used by projects such as Next.js, Parcel, Deno, Vercel, ByteDance, Tencent and Shopify. SWC supports TypeScript and React-JSX files in addition to JavaScript.
Esbuild is developed by evanw, who according to his website is a CoFounder of Figma. The transpiler is used in projects such as Vite + Snowpack, Amazon CDK and the Phoenix framework. In addition to JavaScript, TypeScript and React-JSX files are also being supported here.
Try out SWC
To test SWC, create a new project locally and install the npm packages:
npm i -D @swc/cli @swc/coreWith the following npx command you can transpile the JS file with the default settings:
npx swc ./file.jsConfiguration
The configuration can be done via 2 files:
.swcrcspack.config.js
The compilation works out of the box without any customization. All configuration options are listed here.
{
"jsc": {
"parser": {
"syntax": "ecmascript",
"jsx": false,
"dynamicImport": false,
"privateMethod": false,
"functionBind": false,
"exportDefaultFrom": false,
"exportNamespaceFrom": false,
"decorators": false,
"decoratorsBeforeExport": false,
"topLevelAwait": false,
"importMeta": false
},
"transform": null,
"target": "es5",
"loose": false,
"externalHelpers": false,
// Requires v1.2.50 or upper and requires target to be es2016 or upper.
"keepClassNames": false
}
}In spack.config.js, the source and destination folders of the files to be processed can be adjusted:
module.exports = {
entry: {
web: __dirname + "/src/index.ts",
},
output: {
path: __dirname + "/dist",
},
};Bundling
The bundling of JavaScript and TypeScript files is called 'spack' at SWC. A spack.config.js must be created in the source and target folder as a precondition. Bundling can then be started in the terminal with npx spack.
Minification
The SWC webpage gives the following information on minification: 'Starting with v1.2.67, you can configure SWC to minify your code by enabling minify in your .swcrc file.'
Try out esbuild
The packages can be installed with:
npm install esbuildThe following command must be executed:
./node_modules/.bin/esbuild app.js --bundle --outfile=out.jsConfiguration
Unlike SWC, esbuild does not use configuration files, but allows configuration when the programme is called. The documentation shows examples for the command line, JavaScript and Go. Here is an example for JavaScript:
require('esbuild').buildSync({
entryPoints: ['app.jsx'],
bundle: true,
minify: true,
sourcemap: true,
target: ['chrome58', 'firefox57', 'safari11', 'edge16'],
outfile: 'out.js',
})Bundling
As in the example, bundle only has to be specified as true for bundling. There is also the possibility of specifying the target for the browsers, as can be seen in the target option.
Minification & Sourcemap
As the example also shows, these options are also supported, but the documentation gives many more details about how the API and the script approach can be used to influence the process.
Summary
Both tools offer huge performance gains compared to the top dog Babel, but the change is not always possible as a drop-in due to the many configuration options of the tools.
Furthermore, the performance gain only has an indirect effect on the website, as these tools are only used by the developer or in deployment pipelines. But especially on the development side, it helps immensely if a change shows effects on the screen after a few moments instead of after several seconds.
Contact us!
We are a digital agency, which is specialized in the development of digital products. Our core topics are websites and portals with TYPO3, eCommerce with Shopware and Android and iOS-Apps. In addition, we deal with many other topics in the field of web development. Feel free to contact us with your concerns!
Comments