Creating NPM package with Typescript.
Tags: npm, typescript, beginners, tutorial
Published: 2024-02-27 16:35:38

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

```bash
mkdir json-ziip
cd json-ziip
npm init -y
```

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.

```bash
npm install adm-zip
```

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

```typescript
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');
}
```

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:

```json
{
    "compilerOptions": {
        "target": "ESNext",
        "module": "CommonJS",
        "strict": true,
        "esModuleInterop": true
    }
}
```

Now, compile the TypeScript code using the `tsc` command:

```bash
tsc
```

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.

```bash
npm login  # Log in to your npm account
npm publish
```

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!