こんにちは〜〜！ 元気でいらっしゃいますか？SMYです！👋 早速始めましょう🚀 これは のパート 3 で、React、ブラウザー、Node、レガシー Node のテスト アプリの作成について詳しく説明します。 SDK 開発シリーズ コンテンツ：  ⚡  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    - TypeScript の型定義。 dts    - エントリポイントを指定します。 entry    - レガシーの場合は  、新しいノード プロジェクトの場合は  、ブラウザーの場合は  。 format cjs esm iife    - コードを縮小し、バンドル サイズを縮小します。 minify   自動的にこのファイルを検索し、すべてを処理するので、追加の設定は必要ありません :) tsup ここで、終了して コマンドを再実行します。 build   npm run build   フォルダーに次の出力が表示されます。  dist    - CJS 出力用 index.cjs  - ESM 用 index.js  - ブラウザ用 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   で、たとえば vite を使用して react アプリを作成します。 example-apps   npm create vite@latest  React アプリを正常に作成したら、React ルート フォルダーで次のコマンドを実行して SDK をリンクします。   npm link ts-lib   の代わりに、package.json 内の SDK/ライブラリ名を指定する必要があります。 ts-lib  React アプリを作成したら、  などのコンポーネント ファイルを開き、次のように SDK を統合します。 App.jsx   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 アプリを実行し、コンソールに移動すると、次のようになります。  まとめ: さまざまな環境で SDK をビルドして実行する手順が完了しました。  SDK を公開するには、パート 4 に進んでください。  ..... これで、独自の SDK を構築するための知識が身につきました。コーディングを楽しんでください! 🚀 以上です！皆さん、良い読み物になったことを願っています。ありがとうございます！✨  👉 フォローしてください GitHub リンクトイン

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

View my Portfolio

Full Stack Engineer

このオーディオは、ストーリーの元の言語で制作されています。

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

About Author

コメント

ラベル

この記事は

Related Stories

ワークフローを10倍に向上させる方法: 必須アプリ17選

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

ユニークなエコシステムを支えるビットコインUTXOのモデル

ワークフローを10倍に向上させる方法: 必須アプリ17選

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

ユニークなエコシステムを支えるビットコインUTXOのモデル

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps

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