Adding ES6 Support

InstructorKent C. Dodds

Share this video with your friends

Send Tweet

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.

Zack Yang
~ 6 years ago

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

Kent C. Doddsinstructor
~ 6 years ago

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!

Zack Yang
~ 6 years ago

Thanks Kent. I learn a lot from this series.

Kent C. Doddsinstructor
~ 6 years ago

Hi Zack, here's the blogpost I was talking about: https://medium.com/@kentcdodds/why-i-don-t-commit-generated-files-to-master-a4d76382564

fpaxton
~ 5 years ago

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.

Kent C. Doddsinstructor
~ 5 years ago

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

fpaxton
~ 5 years ago

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

Kent C. Doddsinstructor
~ 5 years ago

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.

Sergey
~ 5 years ago

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

Kent C. Doddsinstructor
~ 5 years ago

Hey! Hopefully I answer it properly here: https://www.briefs.fm/3-minutes-with-kent/31

Sergey
~ 5 years ago

It helps, thanks!

John Michelin
~ 5 years ago

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?

Kent C. Doddsinstructor
~ 5 years ago

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

Babs Craig
~ 2 years ago

Something small to note: It's recommended to use babel-preset-env in place of babel-preset-es2015 (and other yearly presets) now. See https://babeljs.io/docs/en/env/. Simply replace babel-preset-es2015 with babel-preset-env