Photo by Jose Soriano on Unsplash
The technologies we use keep evolving every day, with every update it makes our life easier. Although the updates have lots and lots of advantages keeping up with them can be exhausting at times. In this post, let’s look at things you can do to keep your Javascript code up to date with the latest features, don’t worry about shipping to different versions.
With every new version of ECMAScript new features, get introduced into Javascript. That’s great as development becomes easier and fun. But to support these new features you need to upgrade node version if you are using node, users need to upgrade their browsers to the latest version in case your Javascript runs inside the browser. Due to these factors, I have seen the following issues in a few Javascript projects.
- Node version is upgraded but no new features are used as support for older versions is required.
- Node version is almost never upgraded. You might think that these are not such huge problems for you and you can live with it, but let me tell you that’s not the case. If we don’t use the full potential of the language we are delaying the inevitable, after few years code will become crippled with old features and a lot harder to upgrade. At this point, you won’t even feel like upgrading any the cycle continues with every version that is released.
How to deal with this?
Well, the thing is to use a proper build pipeline. That is Babel comes in. Using babel you can use the latest features of the language yet not worry about supporting older versions, babel will take care of it for you. You can go to the Babel’s website and take a look at the site. You can type in the code that uses the latest features, and it will show you how the code will look after compilation. The documentation is nice and detailed too. It allows you to specify a config file in which you can define what features you want to support, the version of the language you are targeting the build. You can get builds for different versions by changing the target version. Using babel’s config file you can customize your build process.
Using bundlers
Bundlers bundle all your code files into single file, process them (minify, uglify). [Parcel] (https://parceljs.org/) is a bundler that comes with Babel out of the box, you can start using new features without having to deal with babel config file (you can add one if you want though). Install parcel, serve files with parcel and you are done. I prefer this approach as most of the times I want to serve only the dist file. I hope you implement these tools in your code base. It will take a bit of time but you will be happy down the line. Stay tuned for more content, do share if you found it informative.