こんにちは〜〜！
元気でいらっしゃいますか？SMY です！ 早速始めましょう
ソースコード： https://github.com/smyaseen/typescript-sdk-template
コンテンツ：
-
Some Background of SDK Development -
Developing and running our first version
1⃣ 何 –
SDK (ライブラリとも呼ばれる) は、テクノロジから追加機能を引き出すためのアプリケーションのプラグインとして機能します。
2⃣ なぜ –
TypeScript を使用した SDK 開発では、長期的な型の安全性とメンテナンスにより、長期にわたる信頼性が実現します。
3⃣ 方法 –
SDK をビルドするために必要な基本的な手順は次のとおりです。
- 適切なワークフロー設定でプロジェクトを初期化します。
- Bundler を選択し、その目的を理解する。
- さまざまな環境で SDK を実行するための ESM、CJS、IIFE UMD の理解。
- NPM、セマンティック バージョニング、ライセンスに基づいてライブラリとして公開します。
- 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: 基本的な開発ライブラリをインストールする
- タイプスクリプト
@types/node– TypeScript を NodeJS で操作します。tsup– TypeScript ライブラリをバンドルする最も簡単で最速の方法です。
コピー
npm i typescript @types/node tsup -D
ステップ3: セットアップ tsconfig TypeScript設定用
作成する 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",
-
「
NodeNextライブラリを作成する場合、モジュール指定子でESMを発行するのを防ぐため、適切なオプションです。 のみ バンドラーでは動作しますが、Node.js ではクラッシュします。従来のコードを常識的に記述し、高品質の依存関係に頼ると、その出力は通常、バンドラーや他のランタイムと高い互換性があります。」詳細については、こちらをご覧ください。 https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/ -
sourceMap– ソース ファイルの生成を有効にします。これらのファイルにより、デバッガーやその他のツールは、生成された JavaScript ファイルで作業するときに元の TypeScript ソース コードを表示できます。本番環境では無効にできます。 -
outDir– 出力されるすべてのファイルの出力フォルダーを指定します。
/* AND if you're building for a library: */
"declaration": true,
/* If your code runs in the DOM: */
"lib": ("es2022", "dom", "dom.iterable")
-
declaration– プロジェクト内の TypeScript および JavaScript ファイルから .d.ts ファイルを生成します。 -
lib– ターゲットのランタイム環境を記述するバンドルされたライブラリ宣言ファイルのセットを指定します。es2022Reactのようなノードアプリケーション向けであり、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
ご覧のとおり、 dist 出力ファイルのあるフォルダ index.cjs
最初の 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
リンクトイン