AngularJS with Webpack - ES6 with BabelJS

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

Use the latest features of ECMAScript using BabelJS with Webpack. Simply add the right loader line in your webpack config and everything just works.

[00:00] The next thing we want to do in our application is we want to start using ES6 features today. We're going to do that with a library called Babel. There's a webpack loader for this library.

[00:12] The first thing that we'll do is we'll MPM install the Babel loader, save that as a dev dependency. And then, inside of our webpack config, we'll say module, loaders, and we'll test for all files that end in .js. For all of those, we'll apply the loader Babel.

[00:36] Now we need to restart our webpack Dev server, MPM start. In our index.js, just to make sure that everything is working, we'll change this to const. We'll save, refresh, and everything is working.

[00:52] Let's go ahead and change a couple of things to ES6. We'll say export, default, changes this to an arrow function. Everything's still working. We're good. We'll do export, default, change that to an arrow function. Everything is working.

[01:13] Just for the fun of it, we can change these to arrow functions, as well. We're going to be kind of crazy here. Yeah, that would be a bad idea, actually. Don't do that. In fact, I'll show you why.

[01:26] If you do, then this is bound to the lexical of this. So doing this is actually this being compiled down to something that looks like this and this. That's why you don't want to just go crazy using arrow functions all over the place. It's wise to only use them where it makes sense.

[01:50] It's important to know how arrow functions work, just like all JavaScript. We're going to change this back to a function, fix this back to this, and move that. Now everything is up and working. Just be aware of a couple of tricky things with ES6, but yeah, we can use ES6 features in our Angular code. Super, super easy.

[02:15] That's ES6. All that you really need to do is webpack config, loaders. Everything that ends in .js will be loaded through the Babel loader. If you want to, you can also include an exclude node modules, so that none of your dependencies will run through the Babel loader.

[02:35] We'll restart our server, refresh, and everything is still working. That's how you do ES6 with Angular.

Bulkan
Bulkan
~ 7 years ago

Great videos !

Would be great if you could demonstrate how to use Webpack to load dependencies installed with bower and how it is able to create sourcemaps.

Kent C. Dodds
Kent C. Doddsinstructor
~ 7 years ago

See this lesson: https://egghead.io/lessons/javascript-webpack-loaders-source-maps-and-es6 And look at adding bower_components to resolve.modulesDirectories http://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

Rodney
Rodney
~ 6 years ago

How would you go about getting angular to work with webpacks Hot Module Replacement capabilities? Would be great to see a vid on that. Cheers.

Kent C. Dodds
Kent C. Doddsinstructor
~ 6 years ago

Wow, just noticed this. Sorry about that. I don't think that there'd be any way to actually do this just because the way that angular bootstraps your application. There would be very few functions that you could reasonably hot reload. But if you find a way to do this. I'd totally love to see it.

Lars Rye Jeppesen
Lars Rye Jeppesen
~ 6 years ago

Hey guys, just a heads up:

  • when installing babel, you also need to install "babel-core" together with the "babel-loader".
Mark
Mark
~ 6 years ago

I'm using babel 6 and am having trouble using arrow functions. i read breifly about having to install babel-preset-es2015 but when i --save-dev, add it to the webpack.config query { presets: ['es2015'] }, i get a JS error saying the 'object is not a function'

Kent C. Dodds
Kent C. Doddsinstructor
~ 6 years ago

Hmmm... I'll expect that you're not calling what you think you are. I recommend putting a breakpoint in there and figuring out what you're trying to call. It may be related to this

Przemysław
Przemysław
~ 6 years ago

To have it working you must update webpack.config.js

{test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015'],"plugins": ["add-module-exports"] }},

and in package.json "babel": "^6.3.13", "babel-core": "^6.3.21","babel-loader": "^6.2.0","babel-plugin-add-module-exports": "^0.1.2"

~ 6 years ago

I can confirm that this works. As an alternative, I think that you can use the es6 import syntax as such

const angular = require('angular');
const ngModule = angular.module('app', []);

import directives from './directives';
directives(ngModule);
SML
SML
~ 6 years ago

you don't need "babel" dependency when you've got "babel-loader" and "babel-core" ;)

Billiam
Billiam
~ 6 years ago

I also had to npm install -D babel-preset-2015

Kent C. Dodds
Kent C. Doddsinstructor
~ 6 years ago

Yeah, Babel changed significantly since this series was recorded. Please see this lesson with instructions on how to upgrade.