BT

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

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

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.