Membuat Javacript 및 Typescript 패키지 dengan Typescript

Javascript merupakan bahasa yang memiliki lingkungan dengan penggemar paling banyak, termasuk komunitas NPM yang memiliki banyak sekali 패키지 yang dibuat di lingkungan Javascript, sebagai 프로그래머 Typescript, kita harus menyadari jika Typescript men akanjah 하이브리드 (Javascript 및 Typescript) menjadi sangat penting, menggunakan 도구 seperti 실행 파일tsc dari 패키지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(.Clues)

Membuat 폴더 프로젝트

Kita akan membuat 폴더 untuk 프로젝트 패키지 yang akan kita bangun terlebih dahulu, tidak lupa dengan membuat package.json dengan 형식 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

면책 조항: penggunaan nama 폴더 diatas tidak opinionated , bisa menentukannya sendiri.

설치 도구 yang dibutuhkan

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

npm i -D typescript

멤부아트 파일 콘피구라시

Kita akan membuat 패키지 diman akan menerima lingkungan 모듈 ESM dan CJS. tsc memiliki fitur untuk menggunakan file config yang berbeda, disini kita akan membuat 파일 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 파일 구성 untuk CJS

부아트 파일 베르나마tsconfig.cjs.json 파다 루트 디렉토리, 랄루 이시 뎅간 콘피구라시 세페르티 디바와 이니.

{
  "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 고장 속성 yang penting untuk digunakan, selain itu adalah 속성 konfigurasi 추가 untuk mempermudah pengembangan 패키지.

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 masal EcmaScriptdisini .

Kita juga akan menggunakan"module": "commonjs" untuk memberitahutsc melakukan transpile menjadi Javascript dengan spesifikasi 모듈commonjs .
outDir untuk menentukan dimana hasil transpile akan berada.

Membuat 파일 구성 untuk ESM

부아트 파일 베르나마tsconfig.esm.json 파다 루트 디렉토리, 랄루 이시 뎅간 콘피구라시 세페르티 디바와 이니.

{
  "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 파일 패키지

Buatlah 파일index.ts pada 루트 디렉토리 lalu masukkan contoh 스크립트 dibawah ini

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

Menambahkan 스크립트 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",

멜라쿠칸 트랜스파일

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

npm run build

Menambahkan 속성 baru untuk mendukung spesifikasi 모듈 ESM dan CJS

Tambahkan 속성 dibawah ini didalam 개체 json didalam 파일 package.json untuk mendukung spesifikasi 모듈 하이브리드

  "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 기본 개체 yang di export ketika memanggilrequire("foo") .
module adalah 속성 제안, namun secara de facto digunakan untuk mendeteksi ESM.
exports digunakan untuk menentukan module mana yang akan digunakan ketika menggunakanimport ataurequire .

npm 게시

Langkah terakhir adalah untuk 출판 패키지 kalian ke NPM.

🚀🚀🚀🚀🚀🚀🚀




Gambar 커버 didapatkan melalui artikel