Updating Babel 5 to 6
Babel 6 was a major change in how Babel works and is configured. In this lesson, find out how to update this Angular application built with Webpack to use Babel 6.
For more information about how modules have changed in Babel 6, see this blogpost by Kent.
[00:00] The first thing that we need to do when upgrading to Babel 6 is to update our dependencies. The first dependency that we're going to change is Babel. We're actually going to uninstall as a dev., dependency Babel. The reason for this is because Babel is no longer distributed through the Babel module. Instead, it's distributed through the Babel core module, which we already have, and various Babel plug-ins, which we'll install.
[00:21] The next dependencies that we need, updated are babel-core and babel-loader. My favorite way to update dependencies to their latest version is by using a package called David, which I've installed globally. So we run David, update babel-core, and babel-loader, and this will update those packages to their latest version and update our package JSON to that version.
[00:41] Babel used to ship with the batteries all included approach, where all the transforms for your code to transpile it from ES6 to ES5 were included in the Babel package. That's no longer the case. Babel is now more of a platform than just a transpiler and so all of the transforms are actually separate packages and can be installed individually.
[01:01] However, there are actually a lot of features in ES6 and even the future versions of the ECMAScript standard. We don't want to have to manage a package for each one of those features ourselves. Babel has a concept called presets that allows us to easily include a lot of transforms for our code.
[01:17] In our case, we want to include the ES2015 preset and the stage two presets, which is what Babel used to include by default. So what we're going to do is run NPM install as a dev. dependency, babel-preset-ES2015, and babel-preset-stage-2. Let's go ahead and look at what our package JSON looks like now.
[01:40] Now we no longer have the Babel dependencies, and it's now just babel-core with the latest version, we now have an updated version of babel-loader, and we have the babel-preset-ES2015 and the babel-preset-stage-2.
[01:53] Unfortunately if we go ahead and try to run NPM run start on this project, we're going to see a couple of errors, and that's because in Babel 5 mixing ES6 modules and common JS modules were actually implemented slightly incorrectly and Babel 6 fixed this behavior. However, the code in this project depended on that bug, so we need to go and fix our code. In addition, we're going to discover that Babel actually no longer transpiles your code for you automatically.
[02:21] You have to explicitly mention the transforms that you want to have applied to your code, and that's why we installed these presets. We're going to create a Babel.RC file that will configure Babel to tell it, which presets to load, and ultimately which transforms to apply to our code. We'll create that file right here in our root directory, and say .Babel.RC, and in that file, we simply need to add a JSON object with a property called presets, which is an array of ES2015 and Stage-2.
[02:48] Now let's go update our code. We'll start in our app directory in the index.js. Pretty much any time that you can possibly use the ES6 modules, you want to be doing that. Instead of this require statement here, we're going to say import Angular from Angular, and we'll get rid of that. In this scenario, we're leveraging some stuff form Web Pack. We're fine to leave the require in as it is, you just need to be aware of some of the subtleties of mixing common JS modules with ES6 modules.
[03:16] In this scenario, we're not doing anything with modules there, except Angular modules. Here we have this require statement, we want to actually use an import statement instead. We'll go up here and say import, register directives. This is what we'll call it. From directives and then we'll want to use that down here with register directives NG module.
[03:37] We're still not done. However, we'll see that our application is still broken. We'll be getting an error in here that says, "Web Pack require invocation is not a function." That's because some of our app is still using a combination of common JS and ES6 modules. This is actually a really great use case for a code mod, which will actually modify all of your code automatically for you. You just have to code that up but that's a subject for another lesson.
[04:00] Now we're going to go into our directives module here, and go into the index.js and here we're requiring this file. If we go into that file we'll see that it's actually an ES6 export with a default export. What we need to do is go back to our index.js here and treat this like an ES6 module as it is. We'll say import, register kcd hello from kcd hello. Then we'll replace this with register kcd hello. Now the app is working.
[04:28] So in review, to update your application to Babel 6, you need to uninstall the Babel module, and update the babel-core and babel-loader modules to their latest version. Then you need to install babel-preset-es2015 and babel-preset-stage-2 and configure Babel to use those presets in a Babel.RC file.
[04:47] Then if you've been mixing common JS modules and ES6 modules, you need to go throughout your code and update those. It's also notable that a few things have changed with Babel's require hooks, as well as Babel polyfill, but those won't be covered in this lesson.