Babel 7 released with Typescript and JSX fragment support

2 min read

Babel 7 has been released after 3 years of wait after Babel 6. Babel is a JavaScript compiler. It is mainly used to convert ECMAScript 2015+ code into a backward compatible version of JavaScript. Babel gives developers the freedom to use the latest JavaScript syntax without developers worrying about backward compatibility.

It has been going strong in the Javascript ecosystem. There are currently over 1.3 million dependent repos on GitHub, 17 million downloads on npm per month, and hundreds of users including many major frameworks (React, Vue, Ember, Polymer), and companies (Facebook, Netflix, Airbnb).

Major Breaking Changes

All major changes can be done automatically with the new babel-upgrade tool. babel-upgrade is a new tool that automatically makes upgrade changes: currently with dependencies in package.json and .babelrc config.

Drop support for un-maintained Node versions: 0.10, 0.12, 4, 5
Introducing @babel namespace to differentiate official packages, so babel-core becomes @babel/core.
Deprecation of any yearly presets (preset-es2015, etc).
Dropped the “Stage” presets (@babel/preset-stage-0, etc) in favor of opting into individual proposals.
Some packages have renames: any TC39 proposal plugin will now be -proposalinstead of -transform. So @babel/plugin-transform-class-properties becomes @babel/plugin-proposal-class-properties.
Introduced a peerDependency on @babel/core for certain user-facing packages (e.g. babel-loader, @babel/cli, etc).

Typescript and JSX fragment support

Babel 7 now ships with TypeScript support. Babel will now get the benefits of TypeScript like catching typos, error checking, and fast editing experiences. It will enable JavaScript users to take advantage of gradual typing. Install the Typescript plugin as

npm install –save-dev @babel/typescript

The JSX fragment support in Babel 7 allows returning multiple children from a component’s render method. Fragments look like empty JSX tags. They let you group a list of children without adding extra nodes to the DOM.

Speed improvements

Babel 7 includes changes to optimize the code as well as accept patches from the v8 team. It is also part of the Web Tooling Benchmark alongside many other great JavaScript tools. There are changes to the loose option of some plugins. Moreover transpiled ES6 classes are annotated with a /*#__PURE__*/ comment that gives a hint to minfiers like Uglify and babel-minify for dead code elimination.

What’s Next

There are a lot of new features in the works: plugin ordering, better validation/errors, speed, re-thinking loose/spec options, caching, using Babel asynchronously, etc. You can check out the roadmap doc for a more detailed version.

These are just a select few updates. The entire changes are available on the Babel blog.