你好！ 希望你一切顺利！这是 SMY！👋 让我们马上开始 🚀 这是我们的 的第 3 部分，我们将深入研究为 React、浏览器、节点和旧节点创建测试应用程序。 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 步：创建 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 在 中，创建一个 React 应用程序，例如使用 vite： example-apps   npm create vite@latest 成功创建 React 应用程序后，在 React 根文件夹中运行以下命令来链接我们的 SDK。   npm link ts-lib 代替  ，它应该是 package.json 中的 SDK / Library 名称。 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 App，然后转到控制台；它应该如下所示：  包起来： 我们刚刚完成了在不同环境中构建和运行 SDK 的步骤。 转到第 4 部分发布我们的 SDK。  ..... 现在，您已经掌握了构建自己的 SDK 的知识。祝您编码愉快！🚀 就这样吧，朋友们！希望你们读起来愉快。谢谢！✨  👉 关注我 GitHub   LinkedIn

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

数字游民请注意：您需要了解泰国新推出的 DTV 签证

架构师指南：构建 AI/ML 数据湖参考架构

成功云迁移的完整指南：策略和最佳实践

Claude Sonnet 3.5 系统提示泄漏：法医分析

数字游民请注意：您需要了解泰国新推出的 DTV 签证

架构师指南：构建 AI/ML 数据湖参考架构

成功云迁移的完整指南：策略和最佳实践

Claude Sonnet 3.5 系统提示泄漏：法医分析

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps