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:  Khởi tạo dự án với cài đặt quy trình làm việc phù hợp.  Chọn Bundler và hiểu mục đích của nó.  Hiểu ESM, CJS, IIFE UMD để chạy SDK trên các môi trường khác nhau.  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.  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    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. "-y"  Hãy truy cập   và thêm   để hoạt động với hệ thống Mô-đun EcmaScript (ESM) mới nhất. package.json type: module    của bạn sẽ trông giống như sau: 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" }  Bước 2: Cài đặt thư viện Dev cơ bản  Bản đánh máy    - để làm việc với TypeScript với NodeJS. @types/node    - Cách đơn giản và nhanh nhất để đóng gói các thư viện TypeScript của bạn. tsup  SAO CHÉP   npm i typescript @types/node tsup -D  Bước 3: Thiết lập   cho Cài đặt TypeScript tsconfig  Tạo tệp   ở thư mục gốc của dự án. tsconfig.json  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",  "   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   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: NodeNext chỉ   https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/    - 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. sourceMap    - Chỉ định thư mục đầu ra cho tất cả các tệp được phát ra. outDir  /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"]    - Tạo tệp .d.ts từ tệp TypeScript và JavaScript trong dự án của bạn. declaration    - 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.   dành cho các ứng dụng nút như React và   &   để chạy thư viện trong trình duyệt. lib es2022 dom dom.iterable  Bước 4: Viết mã đầu tiên của chúng tôi  Tạo tệp   và viết mã cơ bản sau: index.ts   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   với tệp đầu ra  dist 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   và dán đoạn mã sau: app.js   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

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

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

Read My Stories

View my Portfolio

Full Stack Engineer

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

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

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

178 Stories To Learn About Essay

223 Stories To Learn About Science

72 Stories To Learn About The Essays Of Adam Smith

85 Stories To Learn About Productivity Hacks

178 Stories To Learn About Essay

223 Stories To Learn About Science

72 Stories To Learn About The Essays Of Adam Smith

85 Stories To Learn About Productivity Hacks

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps