I’ve recently had the opportunity to step into a tech lead role at CyberGRX, and since then, I have thought a lot about the vision I have for the future of the company’s technology. I could probably rant about this vision for hours, but to summarize:
I want us to build technology that outlasts ourselves.
Add the following code to your newly created index.js :
Now that we have the initial functionality for our barebones package, we want to install babel, configure it to transpile the src directory, and save it’s output to the dist directory. Run the following command to add the required babel packages:
In Step 1 we told npm to set our project’s entry point to dist/index.js. What this means is that any projects using our package will look at dist/index.jsto run our code. For this to work as expected, we need to tell babel to save the transpiled output of our src directory into the dist directory.
Create a build script by adding the following line of code under the "scripts" key on line 6 in your package.json. To clarify, insert this after line 6 in package.json and paste in the following:
"build": "npx babel src --out-dir dist",
Let’s test this out! Run the following command
npm run build
NOTE: you will need npx installed globally for this command to work… Install npx by running npm install -g npx
You should now see a dist folder in your project with an index.js file containing the transpiled version of our src/index.js code!
At this point we have closed the loop on the bare minimum needed to npm publish… but don’t do this yet!
Step 6: Development builds
We have babel transpiling our code and writing the output to dist, but we don’t want to manually re-run npm run build in development every time we make changes to our package. Let’s add a start script to watch changes to src and automatically re-trigger a transpile any time changes are made.
Add the following line after the build script from step 5 in package.json
"start": "npx babel src --watch --out-dir dist",
Now run the follow command
npm run start
Any time you make changes to src/index.js, or any other js files you add under src, you will see the changes reflected under dist. Give this a try by changing console.log("Shiggidy Diggidy") to console.log("Memes").
Before we publish this package to npm or commit it to GitHub, we need to create 2 ignore files:
.npmignore — Tells npm which folders & files to ignore when publishing to npm .gitignore — Tells git which folders & files to ignore when pushing to git.
At a high level, we care about the dist directory in npm and the srcdirectory in git.
Create a .npmignore file at the top level of your project & add the following contents
Create a .gitignore file at the top level of your project & add the following contents
Step 8: Publishing your package
Once you’ve developed your package to satisfy whatever you want to release forv1.0.0, it’s time to publish it. Thankfully this is super easy to do, we just run babel & npm publish. To do that, run the following 2 commands:
npm run build
Now your package exists in npm & you can use it like you would use any other npm package!
This guide covers the 100% barebones use case and is designed to get you up and running with a repository that will scale. That being said, there are a few more steps I like to follow when creating packages such as adding eslint , prettier , and tests. Stay tuned for future posts/code for the best way to add these to YOUR npm repo.
Thanks for reading & I hope this helped you to create your own npm package. If you got stuck and want a working version of this tutorial, here is a link to the code for this barebones-npm-package: