Membuat Javacript dan Typescript packages dengan Typescript
Tags: typescript, javascript, es6, indonesia
Published: 2022-02-11 16:59:36

Javascript merupakan bahasa yang memiliki lingkungan dengan penggemar paling banyak, termasuk komunitas NPM yang memiliki banyak sekali package yang dibuat di lingkungan Javascript, sebagai programmer Typescript, kita harus menyadari jika Typescript pada akhirnya akan di transpile menjadi Javascript, oleh karena itu, membuat ekosistem yang hybrid (Javascript & Typescript) menjadi sangat penting, menggunakan tools seperti executable `tsc` dari package `typescript` menjadi kewajiban untuk melakukan proses transpile.

Di tutorial ini, penulis akan memberitahu bagaimana membuat package yang hybrid (menerima dua spesifikasi module yang berbeda dan pula menerima dua bahasa yang memiliki lingkungan yang sama), dimana kalian bisa menggunakan packagenya melalui Typescript (Clue: .d.ts required) maupun Javascript.

## Membuat folder project

Kita akan membuat folder untuk project package yang akan kita bangun terlebih dahulu, tidak lupa dengan membuat package.json dengan format yang benar.

```sh
mkdir tsc-practice

cd tsc-practice
npm init -y # untuk memasang langsung semua default value pada package.json 

# atau
npm init # mengisinya satu persatu
```

Disclaimer: penggunaan nama folder diatas tidak `opinionated`, bisa menentukannya sendiri.

## Install tools yang dibutuhkan

Kita akan menginstall `typescript` untuk proses transpile sebelum melanjutkan ke permainan sesungguhnya yaitu pada bagian konfigurasi.

```sh
npm i -D typescript
```

## Membuat file konfigurasi

Kita akan membuat package dimana akan menerima lingkungan module ESM dan CJS. `tsc` memiliki fitur untuk menggunakan file config yang berbeda, disini kita akan membuat file konfigurasi untuk ESM maupun CJS.

Sebelum itu, untuk melihat semua property konfigurasi yang tersedia dari `tsc`, kalian bisa menggunakan `npx tsc --init`, untuk menyesuaikan kebutuhan setelah mengikuti artikel ini.

- Membuat file config untuk CJS

Buat file bernama `tsconfig.cjs.json` pada root directory, lalu isi dengan konfigurasi seperti dibawah ini.

```js
{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    /* Projects */
    /* Language and Environment */
    "target": "es6" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    /* Modules */
    "module": "commonjs" /* Specify what module code is generated. */ /* Specify the root folder within your source files. */,
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
    /* Emit */
    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
    "declarationMap": true /* Create sourcemaps for d.ts files. */,
    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
    "outDir": "dist/cjs" /* Specify an output folder for all emitted files. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  // include used to fix: Cannot write file because it would overwrite input file when adding exclude.
  // "include": ["*.ts"],
  // "exclude": ["**/*.spec.ts"] // jika ingin menambahkan tests.
}
```

Disini saya akan breakdown property yang penting untuk digunakan, selain itu adalah property konfigurasi additional untuk mempermudah pengembangan package.

 Disini kita akan menggunakan `es6` sebagai spesifikasi dari ecmascript yang paling banyak digunakan namun jika anda ingin melakukan transpile ke spesifikasi yang lebih tinggi seperti `es2016` itu tidak masalah. Ketahui versi spesifikasi EcmaScript [disini](https://www.w3schools.com/Js/js_versions.asp). 

Kita juga akan menggunakan `"module": "commonjs"` untuk memberitahu `tsc` melakukan transpile menjadi Javascript dengan spesifikasi module [commonjs](https://en.wikipedia.org/wiki/CommonJS).

`outDir` untuk menentukan dimana hasil transpile akan berada.

- Membuat file config untuk ESM

Buat file bernama `tsconfig.esm.json` pada root directory, lalu isi dengan konfigurasi seperti dibawah ini.

```js
{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    /* Projects */
    /* Language and Environment */
    "target": "es6" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
    /* Modules */
    "module": "ES6" /* Specify what module code is generated. */ /* Specify the root folder within your source files. */,
    "moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
    /* Emit */
    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
    "declarationMap": true /* Create sourcemaps for d.ts files. */,
    "sourceMap": true /* Create source map files for emitted JavaScript files. */,
    "outDir": "dist/mjs" /* Specify an output folder for all emitted files. */,
    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  },
  // include used to fix: Cannot write file because it would overwrite input file when adding exclude.
  // "include": ["*.ts"],
  // "exclude": ["**/*.spec.ts"] // jika ingin menambahkan tests.
}
```

## Membuat file package

Buatlah file `index.ts` pada root directory lalu masukkan contoh script dibawah ini

```ts
export function greet(greeting: string): string {
  return greeting;
}
```

## Menambahkan script pada package.json

Kita akan menambahkan property baru bernama `build` pada property `scripts` didalam file `package.json` untuk menjalankan proses transpile menggunakan tsc dengan `npm run build`.

```js
"build": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
```

## Melakukan transpile

Setelah semua langkah sudah diikuti dengan benar, dan tanpa error, kita akan melakukan proses transpile.

```sh
npm run build
```

## Menambahkan property baru untuk mendukung spesifikasi module ESM dan CJS

Tambahkan property dibawah ini didalam object json didalam file `package.json` untuk mendukung spesifikasi module hybrid

```js
  "main": "dist/cjs/index.js",
  "module": "dist/mjs/index.js",
  "exports": {
    ".": {
      "import": "./dist/mjs/index.js",
      "require": "./dist/cjs/index.js"
    }
  },
```

`main` digunakan untuk mengembalikan default object yang di export ketika memanggil `require("foo")`.

`module` adalah property proposal, namun secara **de facto** digunakan untuk mendeteksi ESM.

`exports` digunakan untuk menentukan module mana yang akan digunakan ketika menggunakan `import` atau `require`.

## npm publish

Langkah terakhir adalah untuk publishing package kalian ke NPM.

:rocket::rocket::rocket::rocket::rocket::rocket::rocket:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un75xy6ppd9tztj31ies.gif)

---

Gambar cover didapatkan melalui artikel https://dev.to/wpreble1/introduction-to-typescript-32k