[TUTORIAL] Build dan Publish TypeScript ke NPM Package dengan Rollup

Assalamu‘alaikum wr. wb.

Halo gais! Jika sebelumnya, kita sudah Menghubungkan Environment JavaScript dan TypeScript melalui Node JS. Kali ini kita akan membahas Tutorial Build dan Publish TypeScript ke NPM Package dengan Rollup.

Sumber Referensi : Medium.com (@ted-spence)

Kita akan melakukan yang namanya Build dan Publish TypeScript ke NPM Package dengan menggunakan Rollup. Berikut, inilah Langkah-langkahnya.

1. Clone GitHub Rollup

Pertama-tama, buka terlebih dahulu salah satu Repository GitHub berikut ini (rollup-typescript-boilerplate). Kemudian, lakukanlah Git Clone dengan mengeklik kanan dan klik “Git Clone...“ pada folder yang kita tuju.

Dan salin/copy link GitHub di atas.

Setelah itu, klik OK dan tunggu beberapa saat sampai proses cloning sudah selesai.

Maka, akan seperti Folder-nya :

2. Menjalankan Command Line

Kemudian, jalankan beberapa perintah berikut ini :

npm install
npm run-script build

Lalu, pastikan folder directory sudah diarahkan ke “my-app” dan ketik perintah seperti ini :

npx create-react-app my-app --template typescript

Dan ketik lagi beberapa perintah berikut ini :

npm install
npm run-script start
npm install ../rollup-typescript-boilerplate

Maka, seperti ini bentuknya :

Jika sudah, marilah kita tambahkan sedikit pada bagian File package.json yaitu :

"@xg4/hello": "file:../rollup-typescript-boilerplate",

Kode lengkapnya pada File package.json :

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.23",
    "@types/react": "^18.0.33",
    "@types/react-dom": "^18.0.11",
    "@xg4/hello": "file:../rollup-typescript-boilerplate",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Seperti inilah Tampilannya :

Kemudian, carilah File App.tsx pada directory ../my-app/src dan tambahkan sedikit kode program TypeScript seperti ini :

let hello = new Hello();
let result = hello.say();

Dan inilah Kode lengkapnya untuk diatas (Pada File App.tsx) :

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Hello } from "@xg4/hello";
function App() {
  let hello = new Hello();
  let result = hello.say();
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React: {result}
        </a>
      </header>
    </div>
  );
}
export default App;

Dan juga tambahkan sedikit kode program pada folder directory ../rollup-typescript-boilerplate/src pada file index.ts seperti ini :

import { upperCase } from 'lodash'
export default function hello() {
  return upperCase('hello world')
}
export class Hello {
  name: string
  constructor() {
    this.name = 'hello'
  }
  say() {
    return upperCase('hello world')
  }
}

Terakhir, kita pindah terlebih dahulu dengan mengetik cd.. dan kemudian ketik untuk menjalankannya :

npm start

Dan inilah Hasilnya :

Untuk lebih jelasnya, seperti ini Hasil Terminal dari Eksekusi Program di atas :

> my-app@0.1.0 build 
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  71.24 kB  build\static\js\main.8b985076.js
  1.78 kB   build\static\js\787.28cb0dcd.chunk.js
  541 B     build\static\css\main.073c9b0a.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.244.1:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
No issues found.

Maka, akan diarahkan ke Port http://localhost:3000 dan seperti pada Gambar di bawah ini :

VIDEO

Inilah Referensi Video untuk Tutorial Build dan Publish TypeScript ke NPM Package dengan Rollup.

Itulah Tutorial Build dan Publish TypeScript ke NPM Package dengan Rollup. Mohon maaf apabila ada kesalahan sedikitpun.

Terima Kasih 😄😘👌👍 :)

Wassalamu‘alaikum wr. wb.