Fast way to upgrade to Babel 7

According to migration guide from babel, you could use babel-upgrade tool to resolve the issue of stage preset deprecation.

npx babel-upgrade --write --install

But there’s still some problem should be aware.

Duplicated @babel/plugin-syntax-dynamic-import

If your .babelrc include syntax-dynamic-import plugin, the babel-upgrade will create two lines of @babel/plugin-syntax-dynamic-import , you have to remove one.

UPDATE: This is because stage-0 presets also has syntax-dynamic-import , and I add another one in plugins,babel-upgrade is not handled yet.

UPDATE2: babel-upgrade has PR for resolving this issue.

Duplicated Plugin

babel-polyfill and @babel/polyfill are different

They removed polyfill proposals from @babel/polyfill , so you will soon have the error below:

Regenerator runtime error

Familiar, right? Before all of these, there’s a simple import for resolving this error.

import 'babel-polyfill';

It is used to be 2 imports.

import 'core-js/shim';
import 'regenerator-runtime/runtime';

So here is what we need, use these instead.

babel-core becomes @babel/core, right?

Move us to the @babel namespace by switching to using "scoped" packages (details). This helps differentiate official packages, so babel-core becomes @babel/core (and no squatting)
— Babel

After read this, I removed babel-core even babel-upgrade kept the babel-core and @babel/core for me.

And… the test failed.

babel-jest needs babel-core

Also the babel-jest document said if you are using babel version 7, you have to install with babel-core and @babel/core .

yarn add --dev babel-jest babel-core@^7.0.0-0 @babel/core

Then it worked even I am confused.

UPDATE: Now babel-jest only depends on @babel/core , no longer need babel-core, check out the README history. [link]

That’s it! I create a starter kit with babel 7 fully upgraded, go check it out if you are interest.

tpai/r2-starter-kit

References

• https://github.com/babel/babel-upgrade/issues/77
• https://babeljs.io/docs/en/v7-migration#remove-proposal-polyfills-in-babel-polyfill-https-githubcom-babel-babel-issues-8416
• https://github.com/facebook/jest/tree/master/packages/babel-jest#usage