The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Writing next generation JavaScript with Babel 5 (out of date)

Writing next generation JavaScript with Babel 5 (out of date)

3:07
Babel is a compiler that lets us right future JavaScript not yet fully in browsers (ES6 / ES2015, ES7 / ES2016, etc) and transpile it back into code that can be used now. We'll walk through installing babel, writing some future JS syntax, transpiling it, and running it in a browser. **This lesson is out of date and uses an older version of Babel.**
Watch this lesson now
Avatar
egghead.io

Babel is a compiler that lets us right future JavaScript not yet fully in browsers (ES6 / ES2015, ES7 / ES2016, etc) and transpile it back into code that can be used now. We'll walk through installing babel, writing some future JS syntax, transpiling it, and running it in a browser.

Avatar
Ben

what about the dist/main.css file we can see in your example ? is it going though babel too ?

It is less meaningful as babel is aimed at js, but I'm currently trying to load css files in components, using webpack, with an app running with babel.

Google would not reveal much about it. The main problem I guess is that the css files do not get transpiled to the directory the js files go to. Do you have any feedback about it ?

Avatar
Trevor

Hey Ben! The <link href="dist/main.css" rel="stylesheet"> in index.html is simply a placeholder for adding styles in a template I use - we never actually wired up styles for this lesson, so I should have removed it from the code; sorry for the confusion!

Babel is just for JavaScript transpiling. So, since you are using Webpack, you can use Webpack loaders for CSS building. One of the Egghead instructors, Kent C. Dodds, has made a lesson showing how to do this.

I hope this helps!

In reply to Ben
Avatar
Kyle

I think this video should be updated to use 5.8.20 of babel or update it to make it work with the current version of babel. Right now it throws an error suggesting that you install babel-cli

Avatar
Ben

I agree - the video is out of date. The latest directions to get Babel 6 working (at the time of me writing this on 04/26/16) are:

1) uninstall babel (if you already installed it as advised by the video) using this command: npm uninstall babel --save-dev
2) npm install babel-cli babel-preset-es2015 --save-dev
3) Create a .babelrc in the root of your project containing the following text: { "presets": ["es2015"] }

All other setup directions from the first video should then work for you.

In reply to Kyle
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?