415 lượt đọc

Trẻ 5 tuổi có thể làm theo Hướng dẫn phát triển SDK TypeScript này ~ Phần 3: Tạo ứng dụng thử nghiệm

từ tác giả Syed Muhammad Yaseen4m2024/07/08

dài quá đọc không nổi

Đây là Phần 3 trong loạt bài phát triển SDK của chúng tôi, nơi chúng tôi sẽ đi sâu vào việc tạo các ứng dụng thử nghiệm cho nút phản ứng, trình duyệt, nút và nút kế thừa.

featured image - Trẻ 5 tuổi có thể làm theo Hướng dẫn phát triển SDK TypeScript này ~ Phần 3: Tạo ứng dụng thử nghiệm

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:

⚡ Setting up tsup for different execution environments
⚡ Creating our apps

Bước 1: Thiết lập `tsup` cho các môi trường khác nhau

Ở thư mục gốc của dự án, tạo tệp tsup.config.ts và dán nội dung sau:

 import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, });

clean - Làm sạch thư mục đầu ra trước mỗi bản dựng.

dts - định nghĩa kiểu cho TypeScript.

entry - chỉ định điểm vào.

format - cjs cho di sản, esm cho các dự án nút mới hơn và iife cho trình duyệt.

minify - thu nhỏ mã của chúng tôi và giảm kích thước gói.

Không cần cấu hình bổ sung, vì tsup sẽ tự động tìm tệp này và xử lý mọi thứ cho chúng tôi :)

Bây giờ, thoát và chạy lại lệnh build .

 npm run build

Bạn sẽ thấy kết quả sau trong thư mục dist của chúng tôi.

index.cjs - cho đầu ra CJS

index.js - dành cho ESM

index.global.js - dành cho trình duyệt

Bước 2: Tạo ứng dụng nút

Trong example-apps/Node , hãy tạo tệp index.js . Dán nội dung sau:

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

Bây giờ, hãy chạy tệp có nút trong một thiết bị đầu cuối riêng biệt và đi tới thư mục:

 node index.js

Bạn sẽ thấy đầu ra trong thiết bị đầu cuối.

Bước 3: Tạo ứng dụng nút kế thừa

Trong example-apps/Legacy-Node , tạo tệp index.cjs và dán nội dung sau:

 const sdk = require("../../dist/index.cjs"); sdk.default.fetchUsers().then((users) => console.log(users));

Bây giờ, hãy chạy tệp có nút trong một thiết bị đầu cuối riêng biệt và đi tới thư mục:

 node index.cjs

Bạn sẽ thấy đầu ra trong thiết bị đầu cuối.

Bước 4: Tạo ứng dụng trình duyệt

Trong example-apps/Browser , tạo tệp index.html và dán nội dung sau:

 <!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>

Mở tệp trong trình duyệt, bạn sẽ thấy phản hồi sau trong tab bảng điều khiển của phần tử kiểm tra:

Bước 5: Tạo ứng dụng React

Tạo Liên kết tới SDK của chúng tôi để hoạt động như một thư viện cho các dự án mà không cần xuất bản.

 npm link

Trong example-apps , tạo một ứng dụng phản ứng, ví dụ: với vite:

 npm create vite@latest

Sau khi tạo thành công ứng dụng React, hãy chạy lệnh sau trong thư mục gốc React để liên kết SDK của chúng tôi.

 npm link ts-lib

Thay cho ts-lib , nó phải là tên SDK/Thư viện của bạn trong pack.json.

Sau khi tạo ứng dụng React, hãy mở tệp thành phần như App.jsx và tích hợp SDK như sau:

 import sdk from "ts-lib"; console.log(await sdk.fetchUsers());

Xem đầy đủ:

 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;

Chạy Ứng dụng phản ứng và đi tới bảng điều khiển; nó sẽ trông giống như sau: