Quick guide: how to update Babel 5.x -> 6.x

来源:互联网 时间:1970-01-01

Recently Babel 6 was released .

One of the main changes in it was performance optimisations. So updating makes big sense.

It appeared to be very easy. I use Webpack + Babel for JS files and here is a quick manual for updating:

How to update (in short) package.json (npm modules dependencies)

Before:

“babel”: “~5.8.29”,“babel-core”: “~5.8.29”,“babel-loader”: “~5.3.2”,“babel-runtime”: “~5.8.29”

After:

"babel": "~6.0.12","babel-core": "~6.0.12","babel-loader": "babel/babel-loader#develop","babel-preset-es2015": "~6.0.12" babel , babel-core and babel-loader* (read below about the last of them) were just updated babel-runtime module changed to babel-preset-es2015 Webpack config

Before:

...,module: { loaders: [ { test: //.js$/, loader: ‘babel’, query: { // https://github.com/babel/babel-loader#options cacheDirectory: true, // http://babeljs.io/docs/usage/options/ optional: [‘runtime’], stage: 2// Draft specification } } ],},...

After:

...,module: { loaders: [ { test: //.js$/, loader: ‘babel’, query: { // https://github.com/babel/babel-loader#options cacheDirectory: true, presets: ['es2015'] } } ],},... optional and stage params were changed to presets: [‘es2015’] Description Presets

Now instead of optional: [‘runtime’] and stage (of support) optional params for babel-loader you have to use presets.

So far there are two official presets- babel-preset-es2015 and babel-preset-react .

In my Webpack config I use presets: [‘es2015’] which is installed as npm-dependency “babel-preset-es2015”: “~6.0.12” .

Preset- it’s just a module which imports some plugins from the Babel packages directory . es2015 just imports a list of plugin which process es6 (es2015) style code.

Babel-loader

So far new babel-loader version for Babel 6 is not published, but you can try develop branch of it as described in Github related issue . As only new version is published I’ll update the references.

Profit

As already mentioned , guys did a nice job providing optimisations to Babel 6 and they haveeven applied some of them to Babel 5.

But after updating to version 6 my JS build started to take 20% less time. Imagine how much time it would save for during a month of development ��.



相关阅读:
Top