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

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 the best way to set up 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

 

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.

 

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 it’s 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.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").

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 srcdirectory 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!

 

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. 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:

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

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

 

 

 

ALEK HURST

FRONT-END TEAM LEAD

Original article published via Alek Hurst on Medium.

 

—–

Resources:

Complete package.json:

{
  "name": "barebones-npm-package",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "build": "npx babel src --out-dir dist",
    "start": "npx babel src --watch --out-dir dist",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/alekhurst/barebones-npm-package.git"
  },
  "keywords": [
    "barebones",
    "npm",
    "package",
    "node",
    "module",
    "template",
    "boilerplate",
    "babel"
  ],
  "author": "Alek Hurst",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/alekhurst/barebones-npm-package/issues"
  },
  "homepage": "https://github.com/alekhurst/barebones-npm-package#readme",
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6"
  }
}

Complete project structure:

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

 

Leave a Reply