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

Adding ES6 Support

Adding ES6 Support

8:35
Writing the code in the next version of JavaScript can really simplify the development of a library. In this lesson, learn how to create a build which uses the BabelJS transpiler to enable you to write your code using ES6 (aka ES2015) syntax.
Watch this lesson now
Avatar
egghead.io

Writing the code in the next version of JavaScript can really simplify the development of a library. In this lesson, learn how to create a build which uses the BabelJS transpiler to enable you to write your code using ES6 (aka ES2015) syntax.

Avatar
Zack

I don't understand why not commit dist folder. If someone wants to require this library, it can't require right?

Avatar
Kent C.

Hi Zack! I hope you're enjoying the series. Thanks for the question. Committing generated files to source control is a bad idea for libraries (I plan to write a blogpost explaining why). So what we've set up here is we release using semantic-release on Travis. But before we do that, we run the build which generates the dist directory. So at the time npm publish runs, the dist directory exists and people can require it in their projects. In a future lesson, I'm going to show how you can push these generated files to a latest branch on GitHub. If you want to jump ahead, check out npm.im/. Good luck!

In reply to Zack
Avatar
Zack

Thanks Kent. I learn a lot from this series.

In reply to Kent C.
Avatar
fpaxton

Kent, thanks for doing this. I've learned a lot. Unless I'm mistaken, instead of babel, you will now need babel-cli and babel-preset-es2015 to get this working properly. At least that is the solution I've found.

Avatar
Kent C.

Yes, this lesson has yet to be updated to Babel 6.

In reply to fpaxton
Avatar
fpaxton

Just to clarify, was the solution for the dist issue to leave it untracked?

Avatar
Kent C.

That's one solution, but you can actually do some things to make it more specific. I didn't talk about .npmignore. If you use that, then you can add dist to your .gitignore. You can also add dist to your .gitignore and use files in the package.json. In retrospect, that's how I should have taught this concept.

In reply to fpaxton
Avatar
Sergey

Hi Kent. I want to ask why does test go before transpile? Shouldn't we test final form of our code?

Avatar
Sergey

It helps, thanks!

In reply to Kent C.
Avatar
John

Hey there Mr Kent C Dodds. I noticed that you use the webstorm ide as do I. I noticed you don't get funky warnings when you write es6 like I do. I get squigglies, highlights, warnings etc. I have tweaked what I thought it might be however I don't seem to be able to effect any change in the view. Could you point me in the right direction?

Avatar
Kent C.

I don't use Webstorm anymore, but here's how you set your syntax to support ES6: https://medium.com/@brandonaaskov/enabling-es6-syntax-support-in-webstorm-48e22956ecfd

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