TypeScript SDK 開発: 5 歳児でもステップバイステップで理解できる ~ パート 1: 最初の MVP

こんにちは〜〜！

元気でいらっしゃいますか？SMY です！👋 早速始めましょう🚀

コンテンツ：

• ⚡ Some Background of SDK Development
• ⚡ Developing and running our first version

1️⃣ 何 -

SDK (ライブラリとも呼ばれる) は、テクノロジから追加機能を引き出すためのアプリケーションのプラグインとして機能します。

2️⃣ なぜ -

TypeScript を使用した SDK 開発では、長期的な型の安全性とメンテナンスにより、長期にわたる信頼性が実現します。

3️⃣ 方法 -

SDK をビルドするために必要な基本的な手順は次のとおりです。

1. 適切なワークフロー設定でプロジェクトを初期化します。
2. Bundler を選択し、その目的を理解する。
3. さまざまな環境で SDK を実行するための ESM、CJS、IIFE UMD の理解。
4. NPM、セマンティック バージョニング、ライセンスに基づいてライブラリとして公開します。
5. SPA 用の NPM とブラウザ用の CDN。

パート 1 では、基本的な理解を得るために最初の基本的な SDK を構築します。

ステップ1: プロジェクトの初期化

次のコマンドを実行して、プロジェクトを新しいフォルダーに設定します。

 npm init -y

"-y"すべての後続のプロンプトに対してデフォルトで yes になります。作成者、ライセンス、バージョンなど、後で Package.json で変更できます。

package.jsonに移動し、 type: moduleを追加して、最新の EcmaScript モジュール システム (ESM) で動作するようにして下さい。

package.jsonは次のようになります。

 { "name": "ts-lib", "version": "1.0.0", "description": "SDK development tutorial", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "type": "module", "keywords": [], "author": "", "license": "ISC" }

ステップ2: 基本的な開発ライブラリをインストールする

1. タイプスクリプト
2. @types/node - TypeScript を NodeJS で操作します。
3. tsup - TypeScript ライブラリをバンドルする最も簡単で最速の方法です。

コピー

npm i typescript @types/node tsup -D

ステップ3: TypeScript設定用のtsconfigをセットアップする

プロジェクトのルートにtsconfig.jsonファイルを作成します。

コピー

touch tsconfig.json

ファイルに移動して、次の構成を貼り付けます。

 { "compilerOptions": { /* Base Options: */ "esModuleInterop": true, "allowImportingTsExtensions": true, "emitDeclarationOnly": true, "skipLibCheck": true, "target": "es2022", "allowJs": true, "resolveJsonModule": true, "moduleDetection": "force", "isolatedModules": true, "verbatimModuleSyntax": true, /* Strictness */ "strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true, /* If transpiling with TypeScript: */ "module": "NodeNext", "sourceMap": true, "outDir": "dist", /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"] }, "exclude": ["node_modules", "dist"] }

各プロパティにマウスを合わせると、その詳細を確認できます。

ここで理解すべき基本的なことは次のとおりです。

 "module": "NodeNext", "sourceMap": true, "outDir": "dist",

1. 「 NodeNext 、バンドラーでのみ機能し、Node.js ではクラッシュするモジュール指定子を含む ESM の発行を防ぐため、ライブラリを作成するための適切なオプションです。従来のコードを記述し、常識を使用し、高品質の依存関係に依存する場合、その出力は通常、バンドラーや他のランタイムと高い互換性があります。」詳細については、こちらをご覧ください。 https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/

   
   

2. sourceMap - ソース ファイルの生成を有効にします。これらのファイルにより、デバッガーやその他のツールは、生成された JavaScript ファイルで作業するときに元の TypeScript ソース コードを表示できます。本番環境では無効にできます。

   
   

3. outDir - 出力されるすべてのファイルの出力フォルダーを指定します。

 /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"]

1. declaration - プロジェクト内の TypeScript および JavaScript ファイルから .d.ts ファイルを生成します。

   
   

2. lib - ターゲットのランタイム環境を記述するバンドルされたライブラリ宣言ファイルのセットを指定します。es2022 es2022 React などのノード アプリケーション用で、 domとdom.iterableブラウザーでライブラリを実行するためのものです。

ステップ4: 最初のコードを書く

index.tsファイルを作成し、次の基本コードを記述します。

 const add = (a: number, b: number): number => a + b; const subtract = (a: number, b: number): number => a - b; export { add, subtract };

最初のコードを作成します。

コピー

tsup ./index.ts

出力ファイルindex.cjsを含むdistフォルダがあることがわかります。

最初の SDK を統合して実行してみましょう。

app.jsファイルを作成し、次のコードを貼り付けます。

 import { add, subtract } from "./dist/index.cjs"; console.log(add(1, 2)); console.log(subtract(2, 1));

SDK を公開していないため、ローカル ビルドに直接リンクしています。

最初のアプリを実行してみましょう

node app.js

次の出力が表示されます。

 3 1

おめでとうございます 🎉🥳 🚀🚀🚀 最初の SDK を構築して実行しました!

まとめ:

最初の SDK を構築して実行するための基本的な手順が完了しました。パート 2 に進み、基本的なフォルダー構造を構築し、外部 API エンドポイントを統合します 🚀

.....

これで、独自の SDK を構築するための知識が身につきました。コーディングを楽しんでください! 🚀

以上です！皆さん、良い読み物になったことを願っています。ありがとうございます！✨

👉 フォローしてください

GitHub

リンクトイン