Typescript에 대한 Javascript 및 Typescript 패키지 구성

Javascript merupakan bahasa yang memiliki lingkungan dengan penggemar paling banyak, termasuk komunitas NPM yang memiliki banyak sekali package yang dibuat di lingkungan Javascript, sebagai 프로그래머 Typescript, kita harus menyadari jika Typescript pada akhirnya akan di transpile menjadi Javascript, oleh karena itu, membuat ekosistem yang hybrid (Javascript 및 Typescript) 다른 패키지tsc와 달리 패키지typescript가 번역 파일에 포함되어 있습니다.

튜토리얼 초기에 penulis akan memberitahu bagaimana membuat package yang hybrid (menerima dua spesifikasi module yang berbeda dan pula menerima dua bahasa yang memiliki lingkungan yang sama), Diman kalian bisa menggunakan packagenya melalui Typescript (Clue: .d.ts required) maupun Javascript.

Membuat 폴더 프로젝트

프로젝트 패키지는 다음과 같은 메모 폴더에 있습니다. 이 폴더는 다음과 같은 형식으로 되어 있습니다.

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 tidakopinionated , bisa menentukannya sendiri.

설치 도구 yang dibutuhkan

Kita akan menginstalltypescript은 proses transpile sebelum melanjutkan ke permainan sesungguhnya yaitu pada bagian konfigurasi.

npm i -D typescript

Membuat 파일 구성

Kita akan membuat package dimana akan menerima lingkungan 모듈 ESM 및 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.

CJS의 Membuat 파일 구성

Buat 파일 bernamatsconfig.cjs.json pada 루트 디렉토리, 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 menggunakanes6 sebagai spesifikasi dari ecmascript yang paling banyak digunakan namun jika anda ingin melakukan transpile ke spesifikasi yang lebih tinggi seperties2016 itu tidak masalah. EcmaScript 사양 버전disini .

Kita juga akan menggunakan "module": "commonjs" untuk memberitahu tsc melakukan transpile menjadi Javascript dengan spesifikasi module commonjs .
outDir 당신은 당신이 원하는 것을 번역할 수 있습니다.

ESM의 Membuat 파일 구성

Buat 파일 bernamatsconfig.esm.json pada 루트 디렉토리, 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 파일 패키지

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 bernamabuild pada propertyscripts didalam filepackage.json untuk menjalankan proses transpile menggunakan tsc dengannpm run build .

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

멜라쿠칸 트랜스파일

세틀라흐 세무아랑카흐 수다 디이쿠티 덴간 베나르, 단파 오류, 키타 아칸 멜라쿠칸 산문 번역.

npm run build

Menambahkan property baru untuk mendukung spesifikasi 모듈 ESM 및 CJS

Tambahkan 속성 dibawah ini didalam object json didalam 파일package.json은 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 default object yang di export ketika memanggilrequire("foo") .
module Adalah Property Proposal, Namun secara de facto digunakan untuk mendeteksi ESM.

.

npm 게시

Langkah terakhir adalah untuk Publishing package kalian ke NPM.

🚀🚀🚀🚀🚀🚀🚀




감바 커버 didapatkan melalui artikel