days
0
-8
hours
0
0
minutes
-5
0
seconds
0
-8
search
Speaking in tongues

Babel 7 lands, bringing sense to JavaScript compilers

Jane Elizabeth
Babel 7
© Shutterstock / jorisvo

Babel 7 is here! Today, we’re taking a look at the fundamentals of this JavaScript compiler as well as the shiny new bells and whistles that are a part of the latest release like backwards compatibility, syntax transformation, and more!

While it does sound like the open source project most likely to be a planet name in a science fiction film, Babel 7 is actually a compiler for writing next generation JavaScript. There’s no need to worry about language mistakes or syntax errors with this clever compiler.

This tool makes sure developers code correctly in the latest version of JavaScript. If your supported environments don’t support certain features natively, Babel compiles those features down into a supported version much like the vaunted babel fish.

Babel

More specifically, Babel is a toolchain used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript. This makes your code usable in current and older environments. It’s mostly used to transform syntax, polyfill missing features for the target environment, and create source code transformations.

Babel is highly extensible and can be customized based on additional plugins. Developers can create their own transformation pipeline by adding their own plugins. Also, Babel comes with a debugger.

There’s no bulky runtime in Babel; this compiler tries to run as lightweight as possible. As this can’t always be done, the “loose” options for specific transformations trade a light footprint for readability, file size, and speed.

Additionally, Babel can convert JSX syntax with a React preset. Used in conjunction with the babel-sublime package, this makes syntax highlighting easier than ever. Babel can also strip out type annotations with the Flow preset.

SEE ALSO: Vue CLI 3.0 is here: Less configuring, more coding

Babel 7

So, what’s in Babel 7? Mostly a bunch of new tools and features:

  • Upgrading is now a cinch with babel-upgrade, a tool designed to automatically make upgrade changes.
  • There’s also babel.config.js for config resolutions.
  • Selective configuration per glob with override
  • Optimized code for faster build times
  • Support for preset and plugin options
  • Pure annotation support

Other changes include some syntax changes, improved TypeScript support for functions like Flow, and JSX fragment support. There’s an experimental feature called automatic polyfills, which will only import the polyfill bits that are necessary to enable features without support in the targeted environment. Plus, Babel macros are now a thing!

Future features include things like plugin ordering, better validation/errors, speed, re-thinking loose/spec options, caching, using Babel asynchronously, building against itself from CI, smoke tests, running test262. As an open source project, Babel is supported by developers like you. Volunteers are highly welcome to join the project and help make these features a reality.

SEE ALSO: A developer’s introduction to React

Getting Babel 7

Want to try it out? There’s a REPL available for developers to tool around and test Babel out.

The latest release of Babel is available on GitHub for free and sundry.

Author
Jane Elizabeth
Jane Elizabeth is an assistant editor for JAXenter.com.

Leave a Reply

Be the First to Comment!

avatar
400
  Subscribe  
Notify of