Xin chàooooooooo!  Mong bạn làm việc tốt! Đây là SMY! 👋 Hãy bắt tay vào ngay 🚀  Đây là Phần 3 trong   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. loạt bài phát triển SDK  Nội dung:  ⚡  Setting up tsup for different execution environments  ⚡  Creating our apps  Bước 1: Thiết lập   cho các môi trường khác nhau tsup  Ở thư mục gốc của dự án, tạo tệp   và dán nội dung sau: tsup.config.ts   import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, });    - Làm sạch thư mục đầu ra trước mỗi bản dựng. clean    - định nghĩa kiểu cho TypeScript. dts    - chỉ định điểm vào. entry    -   cho di sản,   cho các dự án nút mới hơn và   cho trình duyệt. format cjs esm iife    - thu nhỏ mã của chúng tôi và giảm kích thước gói. minify  Không cần cấu hình bổ sung, vì   sẽ tự động tìm tệp này và xử lý mọi thứ cho chúng tôi :) tsup  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   của chúng tôi.  dist    - cho đầu ra CJS index.cjs    - dành cho ESM index.js    - dành cho trình duyệt index.global.js  Bước 2: Tạo ứng dụng nút  Trong   , hãy tạo tệp   . Dán nội dung sau: example-apps/Node index.js   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   , tạo tệp   và dán nội dung sau: example-apps/Legacy-Node index.cjs   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   , tạo tệp   và dán nội dung sau: 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>  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   , tạo một ứng dụng phản ứng, ví dụ: với vite: example-apps   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   , nó phải là tên SDK/Thư viện của bạn trong pack.json. ts-lib  Sau khi tạo ứng dụng React, hãy mở tệp thành phần như   và tích hợp SDK như sau: App.jsx   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:   Kết thúc:  Chúng tôi vừa hoàn thành các bước để xây dựng và chạy SDK của mình trong các môi trường khác nhau.  Hãy chuyển sang Phần 4 để xuất bản SDK của chúng tô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

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

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

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

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

94 Stories To Learn About John Locke

178 Stories To Learn About Essay

145 Stories To Learn About Book

94 Stories To Learn About John Locke

178 Stories To Learn About Essay

145 Stories To Learn About Book

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps