Start Using Babel 7 Beta Today!

Babel 7 is in beta right now (v7.0.0-beta.32), but with so many great features, some of us just couldn’t wait.

TLDR; New features!!!… To install, replace babel packages with @babel/* version. Update babel config to match. Make a polyfill for @babel/register and call it before running tests. For Jest, temporarily use babel-7-jest.

New Features

Before getting into the setup process, let’s get hyped on some new features!

  • TypeScript Support! The #1 reason for hype. TypeScript is a fantastic tool and it’s great to see more support in the community. Note that to use the TypeScript preset, you will need to set --no-emit option to prevent tsc from outputting files. If writing any jsx, use as casting to prevent confusion between casts and jsx, and be sure to include the appropriate extensions for tools like Webpack, Jest, nyc, and @babel/register.
  • Optional Chaining. The best feature of Coffeescript is now available through Babel! Unfortunately, TypeScript does not yet support this feature, but it’s been in talks for a while.
  • Optional Catch Binding. A minor detail, but this enables catch blocks without defining a catch parameter.
  • Numeric Separators. Make numeric literals more readable by creating a visual separation (a _) between groups of digits
  • Allow configuring babel using babelrc.js (#4630). This is to counteract the deprecation of env in .babelrc. Which was a decision based on confusion around the @babel/preset-env package and setting the env option.
  • Scoped Packages. Not really part of Babel’s feature set, but all Babel packages have been moved in to Babel’s scope and must now be installed as npm install @babel/preset-react rather than npm install babel-preset-react@next. This is a slight but important adjustment. Moving packages under the babel scope frees conflicts with other packages and makes babel packages unambiguous, making it clear to new developers which packages are official.

Installing Babel 7 Beta

For an existing project, first uninstall all existing babel packages. Next, install the new scoped packages. You should now have nothing prefixed with “babel” in package.json unless you use babel-loader, which then needs upgraded to 8.0.0-beta.0.

With the packages updated, adjust the package.json.babelrc, or .babelrc.js. A configuration that uses the new @babel/preset-typescript might look like:

{
"plugins": [
"@babel/syntax-object-rest-spread"
],
"presets": [
"@babel/typescript",
"@babel/react",
[
"@babel/env",
{
"targets": {
"browsers": "last 2 Chrome versions"
}
}
]
]
},

If you encounter these common issues, make sure your babel packages are all the same version and, if you use webpack, make sure babel-loader is on 8.0.0:

  • Module build failed: ReferenceError: Unknown plugin “@babel/syntax-object-rest-spread”
  • Error: You gave us a visitor for the node type “TSDeclareFunction” but it’s not a valid type (While processing preset: “*/@babel/preset-typescript/lib/index.js”)

Just updating the packages and .babelrc is enough to get you running! But if you want to have tests (and you do!), there is an extra step.

Testing With Mocha or Jest

So far, I have successfully run tests in mocha and Jest. As of this article, Ava has yet to offer a version with updated babel dependencies.

The new @babel/register package does not have a polyfill like its predecessor, so instead you will have to make one:

require('@babel/register')({
extensions: ['.ts', '.js', '.tsx', '.jsx']
});

Explicitly setting extensions here is unnecessary for Jest, or if you don’t use TypeScript, but is required to run mocha with Typescript.

Now if using mocha, require the polyfill:

mocha --require setup/babel-polyfill.js src/**/*.test.ts

For coverage, nyc has your back. Make sure it is configured to expect the .ts extension if you use TypeScript.

{
"extension": [
".ts"
],
"require": [
"./setup/babel-polyfill.js"
]
},

Then to run tests,

nyc --reporter=html --reporter=text mocha src/**/*.test.ts

And if using Jest, add the polyfill to your list of setupFiles:

"setupFiles": [
"<rootDir>/setup/babel-polyfill.js"
],

If when testing if you encounter No file coverage available for: *.ts, double check that the extension is being recognized by your test framework.

Conclusion

Babel 7 is not quite ready for adoption on enterprise projects (obviously, being a beta), but is close! I encourage you to try it out on a hobby project and hope you are as excited as I am about the new features, especially the TypeScript preset!

For further details, Babel’s GitHub is by far the most reliable source of information — specifically the packages, notes, and proposals.


Jeff is a Sr. Software Engineer at Acorns in Orange County. He has been developing enterprise JavaScript applications professionally for 7 years — previously at Swrve Inc., and SleepyGiant Entertainment. He is not affiliated with Babel in any way other than he thinks Babel is a great tool.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.