415 測定値

5 歳児でも理解できる TypeScript SDK 開発ガイド ~ パート 3: テストアプリの作成

に Syed Muhammad Yaseen4m2024/07/08

長すぎる; 読むには

これは SDK 開発シリーズのパート 3 で、React、ブラウザー、Node、レガシー Node のテストアプリの作成について詳しく説明します。

featured image - 5 歳児でも理解できる TypeScript SDK 開発ガイド ~ パート 3: テストアプリの作成

こんにちは〜〜！

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

これはSDK 開発シリーズのパート 3 で、React、ブラウザー、Node、レガシー Node のテストアプリの作成について詳しく説明します。

コンテンツ：

⚡ Setting up tsup for different execution environments
⚡ Creating our apps

ステップ1: さまざまな環境に合わせて`tsup`を設定する

プロジェクトのルートにtsup.config.tsファイルを作成し、次の内容を貼り付けます。

 import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, });

clean - 各ビルドの前に出力ディレクトリをクリーンアップします。

dts - TypeScript の型定義。

entry - エントリポイントを指定します。

format - レガシーの場合はcjs 、新しいノードプロジェクトの場合はesm 、ブラウザーの場合はiife 。

minify - コードを縮小し、バンドルサイズを縮小します。

tsup自動的にこのファイルを検索し、すべてを処理するので、追加の設定は必要ありません :)

ここで、終了してbuildコマンドを再実行します。

 npm run build

distフォルダーに次の出力が表示されます。

index.cjs - CJS 出力用

index.js - ESM 用

index.global.js - ブラウザ用

ステップ2: ノードアプリを作成する

example-apps/Nodeで、 index.jsファイルを作成します。次の内容を貼り付けます。

 import sdk from "../../dist/index.js"; console.log(await sdk.fetchUsers());

次に、別のターミナルでノードを使用してファイルを実行し、フォルダーに移動します。

 node index.js

ターミナルに出力が表示されます。

ステップ3: レガシーノードアプリを作成する

example-apps/Legacy-Nodeでindex.cjsファイルを作成し、次のコンテンツを貼り付けます。

 const sdk = require("../../dist/index.cjs"); sdk.default.fetchUsers().then((users) => console.log(users));

次に、別のターミナルでノードを使用してファイルを実行し、フォルダーに移動します。

 node index.cjs

ターミナルに出力が表示されます。

ステップ4: ブラウザアプリを作成する

example-apps/Browserでindex.htmlファイルを作成し、次のコンテンツを貼り付けます。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="../../dist/index.global.js"></script> </head> <body> This is a Test HTML <script> sdk.fetchUsers().then((users) => console.log(users)); </script> </body> </html>

ブラウザでファイルを開くと、検査要素のコンソールタブに次の応答が表示されます。

ステップ5: Reactアプリを作成する

公開せずにプロジェクトのライブラリとして機能する SDK へのリンクを作成します。

 npm link

example-appsで、たとえば vite を使用して react アプリを作成します。

 npm create vite@latest

React アプリを正常に作成したら、React ルートフォルダーで次のコマンドを実行して SDK をリンクします。

 npm link ts-lib

ts-libの代わりに、package.json 内の SDK/ライブラリ名を指定する必要があります。

React アプリを作成したら、 App.jsxなどのコンポーネントファイルを開き、次のように SDK を統合します。

 import sdk from "ts-lib"; console.log(await sdk.fetchUsers());

全景：

 import { useState } from "react"; import reactLogo from "./assets/react.svg"; import viteLogo from "/vite.svg"; import "./App.css"; import sdk from "ts-lib"; console.log(await sdk.fetchUsers()); function App() { const [count, setCount] = useState(0); return ( <> <div> <a href="https://vitejs.dev" target="_blank"> <img src={viteLogo} className="logo" alt="Vite logo" /> </a> <a href="https://react.dev" target="_blank"> <img src={reactLogo} className="logo react" alt="React logo" /> </a> </div> <h1>Vite + React</h1> <div className="card"> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> <p> Edit <code>src/App.tsx</code> and save to test HMR </p> </div> <p className="read-the-docs"> Click on the Vite and React logos to learn more </p> </> ); } export default App;

react アプリを実行し、コンソールに移動すると、次のようになります。