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.
I don't understand why not commit dist folder. If someone wants to require this library, it can't require right?
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!
Thanks Kent. I learn a lot from this series.
Hi Zack, here's the blogpost I was talking about: https://medium.com/@kentcdodds/why-i-don-t-commit-generated-files-to-master-a4d76382564
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.
Yes, this lesson has yet to be updated to Babel 6.
Just to clarify, was the solution for the dist issue to leave it untracked?
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.
Hi Kent. I want to ask why does test go before transpile? Shouldn't we test final form of our code?
Hey! Hopefully I answer it properly here: https://www.briefs.fm/3-minutes-with-kent/31
It helps, thanks!
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?
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
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