Nuxtstop

For all things nuxt.js

Membuat Javacript dan Typescript Packages dengan Typescript

#typescript #javascript #es6 #indonesia
Membuat Javacript dan Typescript Packages dengan Typescript
6 0

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.

mkdir tsc-practice

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

# atau
npm init # mengisinya satu persatu
Enter fullscreen mode Exit fullscreen mode

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.

npm i -D typescript
Enter fullscreen mode Exit fullscreen mode

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.

{
  "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.
}
Enter fullscreen mode Exit fullscreen mode

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.

Kita juga akan menggunakan "module": "commonjs" untuk memberitahu tsc melakukan transpile menjadi Javascript dengan spesifikasi module 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.

{
  "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.
}
Enter fullscreen mode Exit fullscreen mode

Membuat file package

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

export function greet(greeting: string): string {
  return greeting;
}
Enter fullscreen mode Exit fullscreen mode

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.

"build": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
Enter fullscreen mode Exit fullscreen mode

Melakukan transpile

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

npm run build
Enter fullscreen mode Exit fullscreen mode

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

  "main": "dist/cjs/index.js",
  "module": "dist/mjs/index.js",
  "exports": {
    ".": {
      "import": "./dist/mjs/index.js",
      "require": "./dist/cjs/index.js"
    }
  },
Enter fullscreen mode Exit fullscreen mode

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.

🚀🚀🚀🚀🚀🚀🚀

Image description

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

Add comment