How To Create A Barebones Production Ready NPM Package With Babel 7

6 minute read

June 2021

by cybergrx

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.

The first step I’ve taken to execute on this vision is helping establish an open source initiative at the company. One of the first hurdles in this effort was building our first open source package. Instead of just slapping something together, I wanted to use this opportunity to figure out how to create a modern npm package. My goal was to create the simplest possible starter kit for a node module that can be used in any modern JavaScript project.

Oh, I almost forgot…

You can forgo reading this entire article and just fork github.com/alekhurst/barebones-npm-package

What is npm?

Wondering what npm stands for? It refers to Node Package Manager, which is exceptionally powerful and used in most JavaScript applications to make coding dependencies easier to manage. 

What is Babel?

Before we dive into the step-by-step guide to a Babel production build, let’s explain why Babel is perfect for creating npm packages. Babel is a Java tool that allows you to write code in any version of Java so it will work on any website. And because it uses as little code as possible, it keeps coding bulk to a minimum, which is ideal when building an npm package.

Step 1: Create a git repo & npm init it

Create a new directory, git init it, and npm init it using the following commands:

mkdir barebones-npm-package

cd barebones-npm-package

git init

npm init

At this point npm init will ask you a few questions. Here are the answers you should provide:

package name: (barebones-npm-package) [Just Press Enter]

version: (1.0.0) [Just Press Enter]

description: A barebones npm package [Press Enter]

entry point: (index.js) dist/index.js [Press Enter]

test command: [Just Press Enter]

git repository: YOUR_GIT_REPO [Press Enter]

keywords: the,best,package,to,have,ever,existed [Press Enter]

author: JavaScript Wizard [Press Enter]

license: MIT [Press Enter]

is this ok? (yes) [Press Enter]

If you type git status you should now see a package.json file in your newly created repo.

Join The Discussion: CyberGRX Risk Professionals Discussion Board

Step 2: Create a src directory

The src directory is going to be where we place all of the code we actually write. Since we will be using babel to transpile it in a later step, we’re able to use modern JavaScript syntax in this directory’s JavaScript files.

mkdir src

cd src

touch index.js

Add the following code to your newly created index.js :

const tellMeTheMeaningOfLife = () => {

  console.log(“Shiggidy Diggidy”)

}

export default tellMeTheMeaningOfLife;

Step 3: Add babel

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 its output to the dist directory. Run the following command to add the required babel packages:

npm install @babel/cli @babel/core @babel/preset-env –save-dev

You should now see these three packages under devDependencies in your package.json

Step 4: Create a .babelrc

We need to give babel instructions on how to transpile our JS. To do that, create a file:.babelrc at the top level of your project (alongside package.json)

Add the following contents to your newly created .babelrc

{

  “presets”: [“@babel/preset-env“]

}

Step 5: Production builds

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.js to 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 with babel

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”).

To actually work on your npm package, you can use https://docs.npmjs.com/cli/link between a project that includes your npm package and the package itself.

Step 7: .npmignore and .gitignore

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 src directory in git.

Create a .npmignore file at the top level of your project & add the following contents

.DS_Store

node_modules

src

Create a .gitignore file at the top level of your project & add the following contents

.DS_Store

node_modules

dist

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

npm publish

Now your package exists in npm & you can use it like you would use any other npm package!

Continue Reading: Your API Choice Could Make or Break Your Company: GraphQL vs REST From A React Developers Perspective

Closing Thoughts & Next Steps

This guide covers the 100% barebones use case and is designed to get you up and running with a repository that will scale. If you’ve followed it step by step, you’ve created an npm Babel package. And it’s now available for anyone who wants to use it. 

Of note: if you refactor the code or change any of the functions, be sure to update the version number. That way, users can track the version on hand. It’s worth adding a README.md file to help users understand use cases for your package and updating this document every time you update the code. 

A final note: There are a few more steps I like to follow when creating npm 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:

https://github.com/alekhurst/barebones-npm-package

…oh, and if you’re making an open source package, I love you :).

CyberGRX excels at helping companies minimize their cyber risk. Our technical teams also help elevate the industry, including teaching on topics like creating npm packages. To learn more about how CyberGRX can help you manage your third-party cyber risk, request a demo today.

Book Your Demo

Related Articles

About Us

ProcessUnity is a leading provider of cloud-based applications for risk and compliance management. The company’s software as a service (SaaS) platform gives organizations the control to assess, measure, and mitigate risk and to ensure the optimal performance of key business processes. ProcessUnity’s flagship solution, ProcessUnity Vendor Risk Management, protects companies and their brands by reducing risks from third-party vendors and suppliers. ProcessUnity helps customers effectively and efficiently assess and monitor both new and existing vendors – from initial due diligence and onboarding through termination. Headquartered outside of Boston, Massachusetts, ProcessUnity is used by the world’s leading financial service firms and commercial enterprises. For more information, visit www.processunity.com.