How to upgrade to babel 7

Question

I tried to upgrade Webpack and babel to 4, 7 respectively but couldn’t make it work. Also the official doc isn’t helping much with the upgrade

I am getting followin

Answer 1

Babel changed the name of the module babel-core to @babel/core. Just run npm install @babel/core. This will install the latest version of Babel core.

Most of the packages in Babel has been renamed to follow the pattern @babel/PACKAGE_NAME. So if you want to upgrade, change the package names to follow the pattern and run npm install.

To upgrade to Babel 7 you can use this migration guide.

Answer 2

Use babel-upgrade

Tested on node@10.15.3, npm@6.4.1 and babel@7.4.0

You can use following script. (npx on node 5+ only)

npx babel-upgrade --write

The --write flag writes the updates to your package.json and .babelrc.

You will end up with following modifications to package.json:

"devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-private-methods": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0"
}

.babelrc

{
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    [
      "@babel/plugin-proposal-class-properties"
    ],
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-private-methods"
    ]
  ]
}

Out of the above plugins you need @babel/plugin-proposal-class-properties @babel/plugin-proposal-private-methods to make private properties work correctly if you choose to implement them.

If you are using eslint, dont forget to set your parser as babel-eslint like so in your .eslintrc file:

{
    "parser": "babel-eslint"
}

Answer 3

You can use babel-upgrade for smooth upgrading.

https://github.com/babel/babel-upgrade

You might need npm prune after that in order to discard outdated packages in node_modules.

EDIT:

When I tried babel-upgrade, babel and webpack config was not modified. so I had to change it manually. Here is the example.

.babelrc

"presets": ["@babel/env", "@babel/react"]

webpack config

loader: 'babel-loader',
options: { presets: ['@babel/env', '@babel/react']}