The next question we'll answer in this series actually comes from Mr. Taylor Otwell, the creator of Laravel. So this is from a conversation we had a couple months ago that I'm just now getting around to document. So the question is, if you're distributing a package through NPM, how might you set things up so that you can write modern ECMAScript 2015 code with the understanding that once it gets published and when everyone pulls it in, it's going to work everywhere, right? Because when you're writing this ECMAScript 2015 code, not yet, it's not going to work everywhere. So you sort of need a middleman, this in-between compilation process that converts all of this. For example, a class in

everywhere. So you sort of need a middleman, this in-between compilation process that converts all of this. For example, a class in JavaScript, not everything can interpret that just yet. So we want to compile that down to vanilla JavaScript that any browser or node can understand. Okay, let's get started. I'm going to begin by pulling in a couple packages. So Babel is a popular tool for converting ES2015 to ES5. So we'll grab that. We want Babel CLI. And while we're here, let's get one more. Babel preset ES2015. So what that one does is, it's basically a collection of

down. And notice, yeah, it's not as pretty to look at, and that's okay. You won't look at it. The important thing is that it has now been compiled down properly. Great. So now that we know this command, in a few months I'm going to forget it. Why don't we go to our package.json file and add it to a script. And we'll call this, how about compile. And I'll paste that in. Now, if you're not familiar with this, the script section, yeah, for any script referenced within here, you can run npm run and then the name of the key. So if I want to trigger this logic, I can say npm run compile. And now we get the same output. What's next? Well, if we come back,

want to trigger this logic, I can say npm run compile. And now we get the same output. What's next? Well, if we come back, if we're compiling everything down to this directory, I should update the entry point. So this is the file that gets triggered as soon as your package is imported. So I'm going to change that from index to dist/index.js. So now we're going to look at this file rather than this file. Next, here's some things you might want to do. If I create an .npmignore file within my project root, I could add the source directory to that. So here's what this is saying. Any file or directory located here will be ignored.

I could add the source directory to that. So here's what this is saying. Any file or directory located here will be ignored when you publish to npm. So if you think about it, when somebody installs this package, the dist directory is the only code that executes. The source is unnecessary. So we will exclude it entirely. Next, on that same note, you might want to create a .gitignore file and add the dist directory to it. Now, this is the inverse. When I push to GitHub, I don't want to see the dist directory. It's not relevant. And I don't want people submitting pull requests thinking they should edit those files. So you might consider excluding that so that

It's not relevant. And I don't want people submitting pull requests thinking they should edit those files. So you might consider excluding that so that they only see the source directory files. Now, why don't we do just one more thing. Back to package.json, there are extra hooks that we can call here. So for example, prepublish. This will automatically be triggered when you run npm publish. So you've made your changes, and you're going to publish them up so that anyone in the world can pull them in. Okay. Well, when we run publish, it will check to see if you have a prepublish script or command here. And if so, it'll trigger that. So if we want sort of like a before

check to see if you have a prepublish script or command here. And if so, it'll trigger that. So if we want sort of like a before hook, we could say run npm compile. So you know what? Why don't we just try this out in real time? This is a brand new extension for Laravel Elixir I'm working on. So let's go to GitHub and create it. Laravel Elixir rollup. And I'll grab these two lines. Let's go back, initialize git, add everything, I'll say initial commit here, and then paste this in. It's up, and we can see the source directory with the two relevant files. Okay, great. So now,

and then paste this in. It's up, and we can see the source directory with the two relevant files. Okay, great. So now, if I go back to package.json, I've set the version to 1.0, so why don't we go ahead and publish this? Switch back to the terminal, npm publish, and now before I trigger this, don't forget, it's going to trigger this prepublish hook here. So that will compile everything down, and that ensures that no matter what, whenever I publish to npm, before we do anything, we compile all of our code down. And that way, I don't end up in a situation where npm gets code that is not reflected in the actual