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.
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-emitoption to prevent tsc from outputting files. If writing any jsx, use
ascasting 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
envin .babelrc. Which was a decision based on confusion around the
@babel/preset-envpackage and setting the
- 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-reactrather 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:
"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:
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.
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:
If when testing if you encounter
No file coverage available for: *.ts, double check that the extension is being recognized by your test framework.
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!