DEV Community

 Makwasi
Makwasi

Posted on

Creating NPM package with Typescript.

Title: Unveiling JsonZiip: A Journey into Creating an NPM Package

Introduction:
Ever wished for a hassle-free way to zip JSON data in your Node.js projects? That's the gap I sought to fill when I embarked on the journey of creating the JsonZiip npm package. In this article, I'll walk you through the steps I followed, complete with code snippets and commands, to bring this idea to fruition.

Prerequisites:
Before diving into the creation of an npm package like JsonZiip, you'll need a solid understanding of TypeScript, Node.js, npm, and basic knowledge of package.json and module.exports.

Step 1: Setting Up the Project:
To start, let's set up our project directory and initialize it with npm.

mkdir json-ziip
cd json-ziip
npm init -y
Enter fullscreen mode Exit fullscreen mode

This creates a new directory named json-ziip and initializes a new npm project with default settings.

Step 2: Installing Dependencies:
Next, we'll install the dependencies needed for our package. In this case, we'll use adm-zip for zip file manipulation.

npm install adm-zip
Enter fullscreen mode Exit fullscreen mode

Step 3: Writing TypeScript Code:
Now, let's write the TypeScript code for our JsonZiip package. Create a file named index.ts in the project root directory and add the following code:

import fs from 'fs';
import AdmZip from 'adm-zip';

export function createZipFile(jsonData: any, outputFileName: string): void {
    fs.writeFileSync('temp.json', JSON.stringify(jsonData));

    const zip = new AdmZip();
    zip.addLocalFile('temp.json');
    zip.writeZip(outputFileName);

    fs.unlinkSync('temp.json');
}
Enter fullscreen mode Exit fullscreen mode

This code defines a function createZipFile that takes JSON data and an output file name, creates a temporary JSON file, zips it, and then deletes the temporary file.

Step 4: Compiling TypeScript to JavaScript:
Since npm packages are distributed as JavaScript files, we need to compile our TypeScript code to JavaScript. Add the following TypeScript configuration in a tsconfig.json file:

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "CommonJS",
        "strict": true,
        "esModuleInterop": true
    }
}
Enter fullscreen mode Exit fullscreen mode

Now, compile the TypeScript code using the tsc command:

tsc
Enter fullscreen mode Exit fullscreen mode

This generates JavaScript files from our TypeScript code.

Step 5: Documentation and Publishing:
With the code ready, it's time to document our package and publish it to npm. Add appropriate documentation comments to your code and update the package.json file with the necessary information.

npm login  # Log in to your npm account
npm publish
Enter fullscreen mode Exit fullscreen mode

And that's it! Your JsonZiip npm package is now available for the world to use.

Conclusion:
Creating JsonZiip was a rewarding journey, from ideation to publication. By following these steps and leveraging the power of TypeScript and npm, I was able to create a valuable tool for developers worldwide. I encourage you to explore JsonZiip, contribute to its development, and share your feedback. Together, let's continue to innovate and empower developers with powerful solutions. Happy coding!

Top comments (0)