Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Babel 7 Release Improves Support for ES.Next Proposals and TypeScript

Babel 7 Release Improves Support for ES.Next Proposals and TypeScript

This item in japanese

Babel 7 has been released and includes many significant changes and improvements, such as support for TypeScript transpilation and a better approach to managing ES.Next proposals.

The Babel and TypeScript teams collaborated to get Babel to parse and transform type syntax with @babel/preset-typescript. Babel already includes support for Flow, and the goal of the Babel team is to support tools that enable JavaScript users to take advantage of gradual typing. TypeScript program manager Daniel Rosenwasser explains the motivation and benefits for the Babel-TypeScript collaboration:

Over a year ago, we set out to find what the biggest difficulties users were running into with TypeScript, and we found that a common theme among Babel users was that trying to get TypeScript set up was just too hard. The reasons often varied, but for a lot of developers, rewiring a build that’s already working can be a daunting task.

While the TypeScript compiler is still the preferred way to build TypeScript, Babel can handle compiling/transpiling, but it does not have built-in type-checking. This new integration allows Babel users to get the typo and error checking benefits of TypeScript.

TC39, the working group that defines the annual updates to the JavaScript language, creates numerous proposals for consideration following a stage-bsaed process, where Stage 4 signifies inclusion in the language. Babel 7 changes the default behavior to require users to explicitly opt-in to any feature earlier than version 4 with the aim of preventing users from inadvertently relying on features which are not yet final.

A full list of TC39 proposals supported by Babel is available at babel/proposals.

Significant improvements to the approach to configuration with Babel have been made with version 7, including the introduction of babel.config.js. This new configuration file is optional and is not intended as a full replacement for .babelrc, but is expected to be useful in some instances such as different compilation options for development and production environments.

According to Babel maintainer Henry Zhu,

*.js configuration files are fairly common in the JavaScript ecosystem. ESLint and Webpack both allow for .eslintrc.js and webpack.config.js configuration files, respectively.

One caveat to note is that babel.config.js has a different configuration resolution than .babelrc. The new configuration file always resolves the configuration from that file whereas .babelrc would lookup from each file upward until it found a config. This addition makes it possible to take advantage of selective configuration with overrides.

There are challenges on efficiently publishing ES2015+ packages and also consuming and compiling these packages. Babel configuration now allows for applications requiring different compilation configurations for tests, client-side source code, and server-side code to skip the need to create a new .babelrc file per directory.

Babel 7 also adds experimental support for automatic polyfilling for features like Promises and Symbols in environments lacking these features natively. Rather than importing entire polyfills, Babel 7 aims only to import the polyfills used in the codebase.

Better module targeting, caller metadata for Babel transforms, JSX support, a babel-upgrade tool, and much more gets added with Babel 7.

There are several breaking changes to be aware of when upgrading to Babel 7:

  • Remove support for Node.js prior to version 6
  • Switch to using the @babel namespace with scoped packages to prevent confusion with what is an official Babel package.
  • Remove yearly presets, replace with @babel/preset-env
  • Replace stage proposal resets with opt-in for individual TC39 proposals
  • Any TC39 proposal plugin is now -proposal instead of -transform
  • Introduce a peerDependency on @babel/core for certain user-facing packages (e.g. babel-loader, @babel/cli, etc)

In looking towards the future of Babel beyond version 7, Zhu remarks:

Babel is inherently tied to what it compiles: JavaScript. As long as there are new additions to propose/work on there is work to be done there. That includes the time/effort to implement and maintain the syntax even before it becomes "stable." We care about the whole process: the upgrade path, education of new features, teaching of standards/language design, ease of use, and integration with other projects.

For example, the Babel team has been working on support for the revised Decorators proposal which gets included in version 7.1. The revised proposal is significantly different than the previous proposal, and adds many more features. The TypeScript roadmap also includes plans to implement the revised ES Decorator proposal.

Other new Babel features under development include minification, plugin ordering, better validation/errors, using Babel asynchronously, and much more. See the Babel roadmap for more details.

Babel is available under the MIT open source license. Contributions are welcome via the Babel GitHub organization and should follow Babel's contribution guidelines and code of conduct. Donations to support the project may also be made via Open Collective.

Rate this Article