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
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
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.
}
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.
}
Membuat file package
Buatlah file index.ts
pada root directory lalu masukkan contoh script dibawah ini
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
.
"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.
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
"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.
🚀🚀🚀🚀🚀🚀🚀
Gambar cover didapatkan melalui artikel https://dev.to/wpreble1/introduction-to-typescript-32k
Top comments (0)