Phát triển SDK TypeScript: Một đứa trẻ 5 tuổi có thể làm theo từng bước này ~ Phần 1: MVP đầu tiên của chúng tôi

Xin chàooooooooo!

Mong bạn làm việc tốt! Đây là SMY! 👋 Hãy bắt tay vào ngay 🚀

Nội dung:

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

1️⃣ Cái gì -

SDK (đôi khi còn được gọi là thư viện) đóng vai trò như một plug-in trong ứng dụng để lấy được các tính năng bổ sung từ công nghệ.

2️⃣ Tại sao -

Việc phát triển SDK bằng TypeScript mang lại độ tin cậy trong thời gian dài nhờ tính an toàn và bảo trì kiểu trong thời gian dài.

3️⃣ Làm thế nào -

Các bước cơ bản cần thiết để xây dựng SDK như sau:

1. Khởi tạo dự án với cài đặt quy trình làm việc phù hợp.
2. Chọn Bundler và hiểu mục đích của nó.
3. Hiểu ESM, CJS, IIFE UMD để chạy SDK trên các môi trường khác nhau.
4. Xuất bản dưới dạng thư viện trên NPM, phiên bản ngữ nghĩa và Giấy phép.
5. NPM cho SPA và CDN cho trình duyệt.

Trong Phần 1, chúng ta sẽ xây dựng SDK cơ bản đầu tiên để hiểu cơ bản.

Bước 1: Khởi tạo dự án

Chạy lệnh sau để đặt dự án vào một thư mục mới:

 npm init -y

"-y" mặc định là có đối với tất cả lời nhắc tiếp theo. Bạn có thể thay đổi nó sau trong Package.json như tác giả, giấy phép, phiên bản, v.v.

Hãy truy cập package.json và thêm type: module để hoạt động với hệ thống Mô-đun EcmaScript (ESM) mới nhất.

package.json của bạn sẽ trông giống như sau:

 { "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" }

Bước 2: Cài đặt thư viện Dev cơ bản

1. Bản đánh máy
2. @types/node - để làm việc với TypeScript với NodeJS.
3. tsup - Cách đơn giản và nhanh nhất để đóng gói các thư viện TypeScript của bạn.

SAO CHÉP

 npm i typescript @types/node tsup -D

Bước 3: Thiết lập tsconfig cho Cài đặt TypeScript

Tạo tệp tsconfig.json ở thư mục gốc của dự án.

SAO CHÉP

 touch tsconfig.json

Đi tới tệp và dán cấu hình sau:

 { "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"] }

Bạn có thể di chuột qua từng thuộc tính để tìm hiểu sâu hơn về nó.

Điều cơ bản cần hiểu ở đây là:

 "module": "NodeNext", "sourceMap": true, "outDir": "dist",

1. " NodeNext là tùy chọn phù hợp để biên soạn thư viện vì nó ngăn bạn phát ra ESM bằng các bộ xác định mô-đun chỉ hoạt động trong các gói nhưng sẽ gặp sự cố trong Node.js. Khi viết mã thông thường, sử dụng thông thường và dựa vào các phần phụ thuộc chất lượng cao, đầu ra thường tương thích cao với các gói và thời gian chạy khác." Bạn có thể tìm hiểu thêm về nó ở đây: https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/

   
   

2. sourceMap - Cho phép tạo các tệp nguồn. Các tệp này cho phép trình gỡ lỗi và các công cụ khác hiển thị mã nguồn TypeScript gốc khi làm việc với các tệp JavaScript được phát ra. Bạn có thể vô hiệu hóa nó để sản xuất.

   
   

3. outDir - Chỉ định thư mục đầu ra cho tất cả các tệp được phát ra.

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

1. declaration - Tạo tệp .d.ts từ tệp TypeScript và JavaScript trong dự án của bạn.

   
   

2. lib - Chỉ định một tập hợp các tệp khai báo thư viện đi kèm mô tả môi trường thời gian chạy đích. es2022 dành cho các ứng dụng nút như React và dom & dom.iterable để chạy thư viện trong trình duyệt.

Bước 4: Viết mã đầu tiên của chúng tôi

Tạo tệp index.ts và viết mã cơ bản sau:

 const add = (a: number, b: number): number => a + b; const subtract = (a: number, b: number): number => a - b; export { add, subtract };

Xây dựng mã đầu tiên của chúng tôi:

SAO CHÉP

 tsup ./index.ts

Bây giờ bạn có thể thấy chúng tôi có một thư mục dist với tệp đầu ra index.cjs

Hãy tích hợp và chạy SDK đầu tiên của chúng tôi!

Tạo tệp app.js và dán đoạn mã sau:

 import { add, subtract } from "./dist/index.cjs"; console.log(add(1, 2)); console.log(subtract(2, 1));

Vì chúng tôi chưa xuất bản SDK nên chúng tôi đang liên kết trực tiếp với bản dựng cục bộ.

Bây giờ, hãy chạy ứng dụng đầu tiên của chúng tôi

 node app.js

Bạn sẽ thấy đầu ra sau:

 3 1

Xin chúc mừng 🎉🥳 🚀🚀🚀 Chúng tôi vừa xây dựng và chạy SDK đầu tiên của mình!

Kết thúc:

Chúng tôi vừa hoàn thành các bước cơ bản để xây dựng và chạy SDK đầu tiên của mình. Hãy chuyển sang Phần 2, nơi chúng ta sẽ xây dựng cấu trúc thư mục cơ bản và tích hợp điểm cuối API bên ngoài 🚀

.....

Bây giờ, bạn đã được trang bị kiến thức để xây dựng SDK của riêng mình. Chúc mừng mã hóa! 🚀

Thế thôi các bạn! Hy vọng nó là một bài đọc tốt cho bạn. Cảm ơn! ✨

👉Theo dõi tôi

GitHub

LinkedIn