How to create a new Node JS library

In this post we will look at how to create a new Node JS library from scratch, bundling it up with rollup and testing it in a new React application. So let’s get to it 🙂🤘

• first create a new project with npm init
• add dependencies. If there is a dependency that you are sure is also used in the project that’s importing your library then put it in the peerDependecies in package.json. This way it is not installed 2 times. Sometimes this can cause problems where you have 2 versions for example of library react and they fight with each other which leads to errors in the console.
• configure typescript in tsconfig.json, this is mainly a config for react libraries:

{
  "compilerOptions": {
    "outDir": "lib/esm",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "jsx": "react-jsx",
    "declaration": true,
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*.ts*"],
  "exclude": ["node_modules", "lib"]
}

• install needed rollup dependencies + typescript

yarn add -D rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve @rollup/plugin-commonjs

• configure rollup.config.js

import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";

import pkg from "./package.json";

export default {
  input: "src/index.ts",
  output: [
    {
      file: "./lib/cjs/index.js",
      format: "cjs",
    },
    {
      file: "./lib/esm/index.js",
      format: "es",
    },
  ],
  external: [...Object.keys(pkg.peerDependencies || {})],
  plugins: [
    nodeResolve(),
    commonjs(),
    typescript({
      typescript: require("typescript"),
    }),
  ],
};

• declare module definition in the package.json file.

{
  "main": "./lib/cjs/index.js",
  "module": "./lib/esm/index.js",
  "types": "./lib/esm/index.d.ts",
  "files": [
    "/lib"
  ],
}

• now write your code for the library in src/Hello.tsx

import React from 'react';

export interface HelloProps {
  name: string;
}

const Hello: React.FC<HelloProps> = ({ name }) => (
  <div>
    <p>Hello, {name}</p>
  </div>
);

export default Hello;

• add src/index.ts

export { default as Hello } from './Hello'; // export the default export from './Hello', this is Hello component
export * from './Hello'; // export all named exports from './Hello' like HelloProps

• add useful commands for bundling the library

"scripts": {
  "prepack": "yarn build",
  "build": "rollup -c",
  "watch": "rollup -cw"
}

Your final package.json should look similar to this:

{
  "name": "hello",
  "version": "1.0.0",
  "description": "An apiable library for connecting react application with curity",
  "main": "./lib/cjs/index.js",
  "module": "./lib/esm/index.js",
  "types": "./lib/esm/index.d.ts",
  "files": [
    "/lib"
  ],
  "scripts": {
    "prepack": "yarn build",
    "build": "rollup -c",
    "watch": "rollup -cw"
  },
  "author": "apiable.io",
  "license": "ISC",
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^22.0.0",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@types/react": "^17.0.6",
    "@types/react-dom": "^17.0.5",
    "rollup": "^2.74.1",
    "rollup-plugin-typescript2": "^0.31.2",
    "typescript": "^4.6.4",
  }
}

• now to test your library, create a new react project with npx create-react-app example-app –template typescript
• Add to your package.json the relative path of your library from your new react app. For example:

"hello": "file:../hello",

• now just import the Hello component from your library in to App.tsx

import { Hello } from 'hello';

function App() {
  return (
    <div>
      <Hello name="apiable" />
    </div>
  );
}

export default App;

• if everything works fine then you can go back to your library folder and create a new git repository and push your changes
• to publish your library to the npm repository you have to login using npm login and then run npm publish. Note that each time you publish your library you have to bump the version in package.json.