415 讀數

5 岁的孩子也可以遵循这份 TypeScript SDK 开发指南〜第 3 部分：制作测试应用程序

经过 Syed Muhammad Yaseen4m2024/07/08

太長; 讀書

这是我们的 SDK 开发系列的第 3 部分，我们将深入研究为 React、浏览器、节点和旧节点创建测试应用程序。

featured image - 5 岁的孩子也可以遵循这份 TypeScript SDK 开发指南〜第 3 部分：制作测试应用程序

你好！

希望你一切顺利！这是 SMY！👋 让我们马上开始 🚀

这是我们的SDK 开发系列的第 3 部分，我们将深入研究为 React、浏览器、节点和旧节点创建测试应用程序。

内容：

⚡ 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 步：创建 Node 应用

在example-apps/Node中，创建一个index.js文件。粘贴以下内容：

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

现在，在单独的终端中使用节点运行该文件，然后转到该文件夹：

 node index.js

您将在终端中看到输出。

步骤 3：创建旧版 Node 应用

在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中，创建一个 React 应用程序，例如使用 vite：

 npm create vite@latest

成功创建 React 应用程序后，在 React 根文件夹中运行以下命令来链接我们的 SDK。

 npm link ts-lib

代替ts-lib ，它应该是 package.json 中的 SDK / Library 名称。

创建 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 App，然后转到控制台；它应该如下所示：