TypeScript SDK 开发：5 岁小孩也能循序渐进学习~第 1 部分：我们的第一个 MVP

你好！

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

内容：

• ⚡ Some Background of SDK Development
• ⚡ Developing and running our first version

1️⃣ 什么-

SDK（有时也称为库）作为应用程序中的插件，从该技术中获取附加功能。

2️⃣为什么-

使用 TypeScript 进行 SDK 开发由于类型安全和长期维护而具有长期可靠性。

3️⃣ 如何-

构建 SDK 所需的基本步骤如下：

1. 使用正确的工作流程设置初始化项目。
2. 选择 Bundler，并了解其用途。
3. 了解 ESM、CJS、IIFE UMD 以便在不同环境中运行 SDK。
4. 作为 NPM 上的库发布、语义版本控制和许可证。
5. 用于 SPA 的 NPM 和用于浏览器的 CDN。

在第 1 部分中，我们将构建我们的第一个基本 SDK 以获得基本了解。

步骤 1：初始化项目

运行以下命令将项目设置在新文件夹中：

 npm init -y

"-y"默认对所有后续提示都为“是”。您可以稍后在 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 步：安装基础开发库

1. TypeScript
2. @types/node将 TypeScript 与 NodeJS 一起使用。
3. 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",

1. “ NodeNext是编写库的正确选择，因为它可以防止您发出带有模块说明符的 ESM，这些模块说明符仅在捆绑器中有效，但在 Node.js 中会崩溃。当编写常规代码、使用常识并依赖高质量依赖项时，其输出通常与捆绑器和其他运行时高度兼容。”您可以在此处了解更多信息： https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/

   
   

2. sourceMap - 启用源文件的生成。这些文件允许调试器和其他工具在处理发出的 JavaScript 文件时显示原始 TypeScript 源代码。您可以针对生产禁用它。

   
   

3. outDir为所有发出的文件指定一个输出文件夹。

 /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"]

1. declaration - 从项目中的 TypeScript 和 JavaScript 文件生成 .d.ts 文件。

   
   

2. lib - 指定一组描述目标运行时环境的捆绑库声明文件。es2022 适用于 React 等节点es2022程序， 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

LinkedIn