BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Babel 7.9 Reduces Bundle Sizes, Adds TypeScript 3.8 Support

Babel 7.9 Reduces Bundle Sizes, Adds TypeScript 3.8 Support

This item in japanese

Bookmarks

The Babel 7.9 release decreases default bundle sizes when using the module/nomodule pattern and adds support for TypeScript 3.8 and its type-only imports and exports. Babel 7.9 also improves optimizations for JSX transforms and adds experimental parser support for the ES Record & Tuple proposal.

Before Babel 7.9, @babel/preset-env grouped ECMAScript syntax features into groups of related smaller features. Unfortunately, this approach led to increasing large bundles over time due to the gradual introduction of new edge cases and fixes. Including one browser with a known issue would add a significant amount of code to fix a group of related issues.

The new bugfixes: true option instead transpiles the broken syntax to the closest non-broken modern syntax. With the Babel 7.9 release, the bugfixes option works best with the esmodules: true target for browsers with native ES module support. The Babel team expects to improve this approach over their next few releases and enable it by default in Babel 8.

With the TypeScript 3.8 release, developers can now import and export modules for type definitions. Babel does not analyze type definitions, and before the 7.9 release, the @babel/plugin-transform-typescript handled imports not used as values as if they were type-only. With Babel 7.9, the new type modifier can get used without any configuration changes. As explained by Nicolò Ribaudo of the Babel team:

We recommend configuring @babel/preset-typescript or @babel/plugin-transform-typescript so that it only considers imports as type-only when there is the explicit type keyword, similarly to TypeScript's --importsNotUsedAsValues preserve option.

React is currently working on simplifying element creation. The goal is to support new functions for instantiating JSX elements as an alternative to the legacy general-purpose React.createElement function, providing for better optimization. This new approach to element creation is available today for React users via the experimental version of React. This new approach gets leveraged through the following configuration with Babel 7.9, and will become the default with the Babel 8.0 release:

{
  "presets": [
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}

 

Development on Babel 8.0 is underway and a release is expected in the next few months.

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 get made via Open Collective.

Rate this Article

Adoption
Style

BT